{"id":865,"date":"2022-03-31T14:03:28","date_gmt":"2022-03-31T12:03:28","guid":{"rendered":"https:\/\/skabelon.sinnsigngrafisk.dk\/?page_id=865"},"modified":"2022-03-31T15:59:39","modified_gmt":"2022-03-31T13:59:39","slug":"animation","status":"publish","type":"page","link":"https:\/\/skabelon.sinnsigngrafisk.dk\/index.php\/animation\/","title":{"rendered":"Animation"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.16.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row column_structure=&#8221;1_2,1_2&#8243; _builder_version=&#8221;4.16.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;1_2&#8243; _builder_version=&#8221;4.16.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_video src=&#8221;https:\/\/www.youtube.com\/watch?v=yDRD4PvCYrE&#8221; _builder_version=&#8221;4.16.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_video][\/et_pb_column][et_pb_column type=&#8221;1_2&#8243; _builder_version=&#8221;4.16.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text _builder_version=&#8221;4.16.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<h1>Scroll image<\/h1>\n<h5><\/h5>\n<p>&nbsp;<\/p>\n<p>CSS CLASS<br \/><code readonly=\"readonly\" class=\"  language-markup\">Image Class: website-img<\/code><\/p>\n<p>\u00a0<code readonly=\"readonly\" class=\"  language-markup\"><\/code><code readonly=\"readonly\" class=\"  language-markup\">Box Container: website-box<\/code><\/p>\n<p><code readonly=\"readonly\" class=\"  language-markup\"><\/code><\/p>\n<h5><code readonly=\"readonly\" class=\"  language-markup\">CSS<\/code><\/h5>\n<p>&nbsp;<\/p>\n<h5><code readonly=\"readonly\" class=\"  language-markup\"><\/p>\n<p><\/code><\/h5>\n<p><code readonly=\"readonly\" class=\"  language-markup\"><\/code><\/p>\n<pre data-line=\"\" class=\"highlight-height line-numbers language-css\"><code readonly=\"readonly\" class=\"language-css\"><span class=\"token comment\">\/* box container *\/<\/span>\n<span class=\"token selector\">.website-box<\/span> <span class=\"token punctuation\">{<\/span>\n<span class=\"token property\">height<\/span><span class=\"token punctuation\">:<\/span> 300px<span class=\"token punctuation\">;<\/span>\n<span class=\"token property\">overflow<\/span><span class=\"token punctuation\">:<\/span> hidden<span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n\n<span class=\"token comment\">\/* website image position *\/<\/span>\n<span class=\"token selector\">.website-img img<\/span><span class=\"token punctuation\">{<\/span>\n<span class=\"token property\">object-fit<\/span><span class=\"token punctuation\">:<\/span> contain<span class=\"token punctuation\">;<\/span>\n<span class=\"token property\">object-position<\/span><span class=\"token punctuation\">:<\/span> 0px 0px<span class=\"token punctuation\">;<\/span>\n<span class=\"token property\">transition<\/span><span class=\"token punctuation\">:<\/span> object-position 6s ease<span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><code readonly=\"readonly\" class=\"  language-markup\"><\/code><\/p>\n<h5><\/h5>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=&#8221;1_3,1_3,1_3&#8243; _builder_version=&#8221;4.16.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;1_3&#8243; _builder_version=&#8221;4.16.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_column][et_pb_column type=&#8221;1_3&#8243; _builder_version=&#8221;4.16.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_column][et_pb_column type=&#8221;1_3&#8243; module_class=&#8221;website-box&#8221; _builder_version=&#8221;4.16.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_image src=&#8221;https:\/\/skabelon.sinnsigngrafisk.dk\/wp-content\/uploads\/2022\/03\/Ann-web-annimation.jpg&#8221; title_text=&#8221;Ann-web-annimation&#8221; module_class=&#8221;website-img&#8221; _builder_version=&#8221;4.16.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.16.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.16.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_code _builder_version=&#8221;4.16.0&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;]<script><!-- [et_pb_line_break_holder] -->var imgBox = document.querySelectorAll('.website-img img');<!-- [et_pb_line_break_holder] -->for(i=0; i<imgBox.length;i++){<!-- [et_pb_line_break_holder] -->imgBox[i].addEventListener('mouseenter', function(hover){<!-- [et_pb_line_break_holder] -->var imgHeight = this.scrollHeight;<!-- [et_pb_line_break_holder] -->var scrollheight = imgHeight - 300;<!-- [et_pb_line_break_holder] -->hover.target.style.objectPosition = `0px -${scrollheight}px`;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->imgBox[i].addEventListener('mouseleave', function(hover){<!-- [et_pb_line_break_holder] -->hover.target.style.objectPosition = '0px 0px';<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] -->}[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Scroll image &nbsp; CSS CLASSImage Class: website-img \u00a0Box Container: website-box CSS &nbsp; \/* box container *\/ .website-box { height: 300px; overflow: hidden; } \/* website image position *\/ .website-img img{ object-fit: contain; object-position: 0px 0px; transition: object-position 6s ease; } var imgBox = document.querySelectorAll(&#8216;.website-img img&#8217;);for(i=0; iimgBox[i].addEventListener(&#8216;mouseenter&#8217;, function(hover){var imgHeight = this.scrollHeight;var scrollheight = imgHeight &#8211; 300;hover.target.style.objectPosition [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"<!-- wp:divi\/placeholder \/-->","_et_gb_content_width":"","footnotes":""},"class_list":["post-865","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/skabelon.sinnsigngrafisk.dk\/index.php\/wp-json\/wp\/v2\/pages\/865","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/skabelon.sinnsigngrafisk.dk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/skabelon.sinnsigngrafisk.dk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/skabelon.sinnsigngrafisk.dk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/skabelon.sinnsigngrafisk.dk\/index.php\/wp-json\/wp\/v2\/comments?post=865"}],"version-history":[{"count":11,"href":"https:\/\/skabelon.sinnsigngrafisk.dk\/index.php\/wp-json\/wp\/v2\/pages\/865\/revisions"}],"predecessor-version":[{"id":885,"href":"https:\/\/skabelon.sinnsigngrafisk.dk\/index.php\/wp-json\/wp\/v2\/pages\/865\/revisions\/885"}],"wp:attachment":[{"href":"https:\/\/skabelon.sinnsigngrafisk.dk\/index.php\/wp-json\/wp\/v2\/media?parent=865"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}