PK b8RF5
s5
f-parallax-effect.cccomp PK b8Rb]# X# component.jsonX#{"UUID":"dfce17a4-bcdf-4db0-b369-357a46a9b65b","additional_states":{"Container":{"outofview":{"character":".","name":"Out of View","value":"outofview"}},"Heading 3":{"outofview":{"character":".","name":"Out of View","value":"outofview"}},"Paragraph":{"outofview":{"character":".","name":"Out of View","value":"outofview"}}},"appBuildInfo":"RSD 5.0.3418","appId":"RSD","appVersion":3418,"buildNumber":5901,"component_resources":{"classes":10,"file_sizes_values":[855971,0,0],"file_type_values":[3,0,0],"html_elements":0,"ids":4,"links_external":0,"links_internal":0,"local_files":"3 (local size 835,91 kB)"},"description":"Your component description","element_name":"Container","framework":"foundation","html":"
\n // Document Ready\n $( document ).ready(function() {// AOS Transition Time\n AOS.init({\n duration: 1200,\n })\n \n }); //end document ready\n\" data-ce-custom-head=\" \n \n \" data-outline-closed=\"\">
Parallax 'effect' means that the background (here the images) is not scrolling. The images are sitting as background images in containers that have a fixed position. The height of the images is a good deal more than what is being shown in the 'parallax 'windows'. The full height will then be displayed when scrolling the page.
On one of the images there is an example of placing text on top of it. If the image is too colorful to let the text show, the text can be given a translucent background.
This is the village of Raevesand, outside Arendal
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
","htmlembed":{},"mobile_first":true,"name":"f-parallax-effect","resources":{"./img/bg-00.jpg":{"breakpoints":{"default":{".container#pic-00":"background-image"}},"elements":{"counter":0},"pictures":{},"type":"image"},"./img/bg-01.jpg":{"breakpoints":{"default":{".container#pic-01":"background-image"}},"elements":{"counter":0},"pictures":{},"type":"image"},"./img/bg-02.jpg":{"breakpoints":{"default":{".container#container-1":"background-image"}},"elements":{"counter":0},"pictures":{},"type":"image"}},"stylesheet":".container {\n padding-right:0px;\n padding-left:0px;\n}\n\n.container.parallax-wrap {\n padding-top:0px;\n margin-top:50px;\n margin-bottom:20px;\n}\n\n.container#pic-00 {\n background-image:url('./img/bg-00.jpg?id=154&cache=1611441919713');\n background-position:center center;\n background-attachment:fixed;\n background-repeat:no-repeat;\n background-size:cover;\n background-origin:padding-box;\n background-clip:border-box;\n background-blend-mode:normal;\n transition-timing-function:ease-in-out;\n transition-duration:0.4s;\n height:500px;\n}\n\n.container.texts {\n margin-bottom:20px;\n}\n\n.container.comments {\n display:flex;\n flex-wrap:wrap;\n justify-content:flex-start;\n max-width:1200px;\n padding-top:30px;\n padding-right:20px;\n padding-left:20px;\n margin-top:50px;\n margin-right:0vmin;\n margin-left:0vmin;\n border-top-width:0.0625rem;\n border-top-style:solid;\n border-right-style:solid;\n border-bottom-style:solid;\n border-left-style:solid;\n border-right-width:0.0625rem;\n border-bottom-width:0.0625rem;\n border-left-width:0.0625rem;\n border-top-color:rgba(8, 78, 105, 1);\n border-right-color:rgba(8, 78, 105, 1);\n border-bottom-color:rgba(8, 78, 105, 1);\n border-left-color:rgba(8, 78, 105, 1);\n}\n\n.container.info {\n width:100%;\n}\n\nh3.comments-heading {\n font-weight:600;\n font-size:24px;\n line-height:28px;\n text-align:center;\n}\n\np.paragraph {\n font-family:'Roboto', sans-serif;\n font-size:16px;\n color:rgba(94, 89, 85, 1);\n margin-top:7px;\n margin-bottom:7px;\n line-height:1.7;\n padding-bottom:5px;\n}\n\np.paragraph.explanation {\n font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;\n line-height:24px;\n color:rgba(33, 37, 41, 1);\n padding-right:10px;\n padding-left:10px;\n padding-bottom:0px;\n margin-bottom:16px;\n}\n\n.container#pic-01 {\n background-image:url('./img/bg-01.jpg?id=155&cache=1611440717954');\n background-position:center center;\n background-attachment:fixed;\n background-repeat:no-repeat;\n background-size:cover;\n background-origin:padding-box;\n background-clip:border-box;\n background-blend-mode:normal;\n height:500px;\n transition-timing-function:ease-in-out;\n transition-duration:0.4s;\n}\n\np.paragraph.paragraph-6 {\n padding-top:200px;\n text-align:center;\n color:rgba(255, 255, 255, 1);\n font-size:28px;\n}\n\n.container#container-1 {\n background-image:url('./img/bg-02.jpg?id=156&cache=1611440748311');\n background-position:center center;\n background-attachment:fixed;\n background-repeat:no-repeat;\n background-size:cover;\n background-origin:padding-box;\n background-clip:border-box;\n background-blend-mode:normal;\n transition-timing-function:ease-in-out;\n transition-duration:0.4s;\n height:500px;\n}\n\n@media screen and (min-width: 28.75rem) {\n .container.comments {\n display:flex;\n flex-wrap:wrap;\n justify-content:center;\n max-width:1200px;\n }\n}\n\n@media screen and (min-width: 40rem) {\n .container.info {\n width:50%;\n }\n}\n\n@media screen and (min-width: 64rem) {\n .container.parallax-wrap {\n max-width:1200px;\n margin-right:auto;\n margin-left:auto;\n }\n\n .container.comments {\n margin-top:60px;\n border-top-width:0.0625rem;\n border-top-style:solid;\n border-right-style:solid;\n border-bottom-style:solid;\n border-left-style:solid;\n border-right-width:0.0625rem;\n border-bottom-width:0.0625rem;\n border-left-width:0.0625rem;\n border-top-color:rgba(98, 129, 147, 1);\n border-right-color:rgba(98, 129, 147, 1);\n border-bottom-color:rgba(98, 129, 147, 1);\n border-left-color:rgba(98, 129, 147, 1);\n background-color:rgba(0, 0, 0, 0);\n }\n}","timestamp":1611487351993,"type":"Container","units":"rem"}
PK b8R\W W resources/img/bg-00.jpg #^Exif II* 0 ( 1 2 ; i @ Canon Canon EOS 90D
'
' Adobe Photoshop 22.1 (Windows) 2021:01:23 23:20:39 Inger Eik
inger.eik@gmail.com # " ' 0 2 0231 " * 2
: B
J R
Z 90 90 b j 1
r 2 4 5 2020:08:19 18:24:33 2020:08:19 18:24:33 +01:00 +02:00 +02:00 Ho @B v v 083052003628 EF-S24mm f/2.8 STM 0000136def ( 8 H H Adobe_CM Adobe d
k "
?
3 !1AQa"q2B#$Rb34rC%Scs5&DTdE£t6UeuF'Vfv7GWgw 5 !1AQaq"2B#R3$brCScs4%&5DTdEU6teuFVfv'7GWgw ? U]4͕aXZ]l 9Fs6;!pWϥez [[lslY]S-~%U]#f̼mY:nmnKk-1A8'Gг'eȩ9~1 ?['zU]v^!7S˶l{;Dm.h=VÝ[n?~7*{N=m5Uc=AcCrccO:~ T9qPv9
}Gqa}jh{q/ic~Mz +ꘙh=t8}}6?C3=/+Sak!ꥬnԯ)Vl3ֺ d8ns,͞]}o_ .fpT'/.$ &~3=JY 5y