├── .gitignore ├── README.md ├── img ├── 1.jpg ├── 2.jpg ├── 3.jpg ├── 4.jpg ├── 5.jpg ├── 6.jpg ├── 7.jpg ├── arrow.svg └── star.svg ├── index.html ├── js ├── js.js ├── luxy.js └── splitting.min.js └── style ├── normalize.css └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | package-lock.json 3 | *.DS_Store 4 | .vscode -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Paralax-effect-with-gsap-scrolltrigger 2 | Paralax effect with gsap scrolltrigger 3 | 4 | DEMO - https://dmitrinaumov.github.io/Paralax-effect-with-gsap-scrolltrigger/ \ 5 | -------------------------------------------------------------------------------- /img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitriNaumov/Paralax-effect-with-gsap-scrolltrigger/eb7f1ce85cf46882f2e89bba2e4b93c391989ebd/img/1.jpg -------------------------------------------------------------------------------- /img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitriNaumov/Paralax-effect-with-gsap-scrolltrigger/eb7f1ce85cf46882f2e89bba2e4b93c391989ebd/img/2.jpg -------------------------------------------------------------------------------- /img/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitriNaumov/Paralax-effect-with-gsap-scrolltrigger/eb7f1ce85cf46882f2e89bba2e4b93c391989ebd/img/3.jpg -------------------------------------------------------------------------------- /img/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitriNaumov/Paralax-effect-with-gsap-scrolltrigger/eb7f1ce85cf46882f2e89bba2e4b93c391989ebd/img/4.jpg -------------------------------------------------------------------------------- /img/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitriNaumov/Paralax-effect-with-gsap-scrolltrigger/eb7f1ce85cf46882f2e89bba2e4b93c391989ebd/img/5.jpg -------------------------------------------------------------------------------- /img/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitriNaumov/Paralax-effect-with-gsap-scrolltrigger/eb7f1ce85cf46882f2e89bba2e4b93c391989ebd/img/6.jpg -------------------------------------------------------------------------------- /img/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DmitriNaumov/Paralax-effect-with-gsap-scrolltrigger/eb7f1ce85cf46882f2e89bba2e4b93c391989ebd/img/7.jpg -------------------------------------------------------------------------------- /img/arrow.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/star.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Paralax Effect On GSAP 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 |
24 |

Parallax effecton 25 | gsap

26 |
27 | 1 28 |
29 |
30 |
31 | discuss your ideas 32 | 33 | 34 | 35 | 36 | discuss your ideas 37 | 38 | 39 | 40 | 41 | discuss your ideas 42 | 43 | 44 | 45 | 46 | discuss your ideas 47 | 48 | 49 | 50 | 51 |
52 |
53 |
54 | 55 |
56 | 57 | 58 |
59 |
60 |
61 | 2 62 |
63 |
64 |

about 65 | 66 |

67 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque esse 68 | aspernatur fugit debitis quisquam. Quia exercitationem ipsum voluptas voluptatum hic 69 | enim quo provident culpa possimus cupiditate! Dolorum quae doloremque cum rerum ipsam 70 | inventore beatae, at odit, velit, aspernatur minima! Corporis.

71 |
72 |
73 |
74 | 75 | 76 |
77 |
78 |

benefits 79 | 80 |

81 | 82 |
    83 |
  • 84 | /01 85 |

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, quas. 86 |

    87 |
    • 88 |
  • 89 | /02 90 |

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, quas. 91 |

    92 |
    • 93 |
  • 94 | /03 95 |

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, quas. 96 |

    97 |
    • 98 |
  • 99 | /04 100 |

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, quas. 101 |

    102 |
    • 103 |
  • 104 | /05 105 |

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, quas. 106 |

    107 |
    • 108 |
  • 109 | /06 110 |

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, quas. 111 |

    112 |
    • 113 |
114 |
115 |
116 | 117 | 118 |
119 |
120 |

portfolio 121 | 122 |

123 |
124 | 125 |
126 |
127 | /001 128 |
129 | 3 130 |
131 |
132 |
133 | /002 134 |
135 | 4 136 |
137 |
138 |
139 | /003 140 |
141 | 5 142 |
143 |
144 |
145 | /004 146 |
147 | 6 148 |
149 |
150 |
151 |
152 | 153 | 154 |
155 |
156 |

services 157 | 158 |

159 | 160 |
161 |
162 | 163 | 164 | 165 |
166 | /Graphic Design 167 |
168 |
169 |
170 | 171 | 172 | 173 |
174 | /UX/UI Design 175 |
176 |
177 |
178 | 179 | 180 | 181 |
182 | /Web Design 183 |
184 |
185 |
186 | 187 | 188 | 189 |
190 | /Brend Design 191 |
192 |
193 |
194 |
195 |
196 |
197 | 198 | 199 | 214 |
215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | -------------------------------------------------------------------------------- /js/js.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", function () { 2 | 3 | 'use strict'; 4 | 5 | 6 | 7 | Splitting(); 8 | luxy.init(); 9 | gsap.registerPlugin(ScrollTrigger); 10 | 11 | const gTl = gsap.timeline(); 12 | gTl.from(".title .char", 1, { opacity: 0, yPercent: 130, stagger: 0.06, ease: "back.out" }); 13 | gTl.to(".header__img", 2, { clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)", scale: 1, ease: "expo.out" }, "-=1"); 14 | gTl.from(".header__marq", 2, { opacity: 0, yPercent: 100, ease: "expo.out" }, "-=1.5"); 15 | 16 | const gsapSq = gsap.utils.toArray('.section-title__square'); 17 | gsapSq.forEach((gSq, i) => { 18 | const rotat = gsap.from(gSq, 3, { rotation: 720 }); 19 | ScrollTrigger.create({ 20 | trigger: gSq, 21 | animation: rotat, 22 | start: 'top bottom', 23 | scrub: 1.9 24 | }); 25 | }); 26 | 27 | 28 | //header 29 | function header() { 30 | gsap.to('.title_paralax', { 31 | scrollTrigger: { 32 | trigger: '.header', 33 | start: 'top top', 34 | scrub: 1.9 35 | }, 36 | yPercent: -150 37 | }) 38 | gsap.to('.header .stroke', { 39 | scrollTrigger: { 40 | trigger: '.header', 41 | start: 'top top', 42 | scrub: 1.9 43 | }, 44 | xPercent: 50 45 | }) 46 | gsap.to('.header__img', { 47 | scrollTrigger: { 48 | trigger: '.header', 49 | start: 'top top', 50 | scrub: 1.9 51 | }, 52 | xPercent: -70 53 | }) 54 | gsap.to('.header__img img', { 55 | scrollTrigger: { 56 | trigger: '.header', 57 | start: 'top top', 58 | scrub: 1.9 59 | }, 60 | scale: 1.3 61 | }) 62 | gsap.to('.header__marq-wrapp', { 63 | scrollTrigger: { 64 | trigger: '.header', 65 | start: 'top top', 66 | scrub: 1.9 67 | }, 68 | xPercent: -50 69 | }) 70 | gsap.to('.header__marq-star img', { 71 | scrollTrigger: { 72 | trigger: '.header', 73 | start: 'top top', 74 | scrub: 1.9 75 | }, 76 | rotate: -720 77 | }) 78 | } 79 | header(); 80 | 81 | 82 | //about 83 | function about() { 84 | gsap.from('.about__img', { 85 | scrollTrigger: { 86 | trigger: '.about', 87 | start: 'top bottom', 88 | scrub: 1.9 89 | }, 90 | yPercent: 80 91 | }) 92 | gsap.from('.about__img img', { 93 | scrollTrigger: { 94 | trigger: '.about', 95 | start: 'top bottom', 96 | scrub: 1.9 97 | }, 98 | scale: 1.6 99 | }) 100 | gsap.to('.about__txt', { 101 | scrollTrigger: { 102 | trigger: '.about__wrapp', 103 | start: 'top bottom', 104 | scrub: 1.9 105 | }, 106 | yPercent: 50 107 | }) 108 | } 109 | about(); 110 | 111 | 112 | //benefits 113 | function benefits() { 114 | gsap.from('.benefits__num', { 115 | x: (i, el) => (1 - parseFloat(el.getAttribute('data-speed'))), 116 | scrollTrigger: { 117 | trigger: '.benefits__list', 118 | start: 'top bottom', 119 | scrub: 1.9 120 | } 121 | }) 122 | } 123 | benefits(); 124 | 125 | 126 | //portfolio 127 | function portfolio() { 128 | gsap.from('.work__item, .work__item-num', { 129 | y: (i, el) => (1 - parseFloat(el.getAttribute('data-speed'))), 130 | scrollTrigger: { 131 | trigger: '.work', 132 | start: 'top bottom', 133 | scrub: 1.9 134 | } 135 | }) 136 | gsap.from('.work__item-img img', { 137 | scale: 1.6, 138 | scrollTrigger: { 139 | trigger: '.work__wrapp', 140 | start: 'top bottom', 141 | scrub: 1.9 142 | } 143 | }) 144 | } 145 | portfolio(); 146 | 147 | 148 | //serv 149 | function serv() { 150 | gsap.from('.serv__item-arrow', { 151 | x: (i, el) => (1 - parseFloat(el.getAttribute('data-speed'))), 152 | scrollTrigger: { 153 | trigger: '.serv__list', 154 | start: 'top bottom', 155 | scrub: 1.9 156 | } 157 | }) 158 | } 159 | serv(); 160 | 161 | 162 | //footer 163 | function footer() { 164 | gsap.from('.footer__div span', { 165 | y: (i, el) => (1 - parseFloat(el.getAttribute('data-speed'))), 166 | opacity: 0, 167 | scrollTrigger: { 168 | trigger: '.footer', 169 | start: 'top bottom', 170 | end: 'bottom bottom', 171 | scrub: 1.9 172 | } 173 | }) 174 | } 175 | footer(); 176 | }); -------------------------------------------------------------------------------- /js/luxy.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Written by Mineo Okuda on 01/03/18. 3 | * 4 | * Mineo Okuda - development + design 5 | * https://willstyle.co.jp 6 | * https://github.com/min30327 7 | * 8 | * MIT license. 9 | */ 10 | 11 | (function(root, factory) { 12 | 'use strict'; 13 | 14 | if (typeof define === 'function' && define.amd) { 15 | // AMD. Register as an anonymous module. 16 | define([], factory); 17 | } 18 | else if (typeof exports === 'object') { 19 | // COMMONJS 20 | module.exports = factory(); 21 | } 22 | else { 23 | // BROWSER 24 | root.luxy = factory(); 25 | } 26 | }(this, function() { 27 | 28 | 'use strict'; 29 | 30 | var defaults = { 31 | wrapper: '#luxy', 32 | targets : '.luxy-el', 33 | wrapperSpeed: 0.08, 34 | targetSpeed: 0.02, 35 | targetPercentage: 0.1 36 | }; 37 | 38 | var requestAnimationFrame = 39 | window.requestAnimationFrame || window.mozRequestAnimationFrame || 40 | window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; 41 | window.requestAnimationFrame = requestAnimationFrame; 42 | var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame; 43 | 44 | /** 45 | * Merge two or more objects. Returns a new object. 46 | * @param {Object} objects The objects to merge together 47 | * @returns {Object} Merged values of defaults and options 48 | */ 49 | var extend = function () { 50 | 51 | // Variables 52 | var extended = {}; 53 | var deep = false; 54 | var i = 0; 55 | var length = arguments.length; 56 | 57 | // Merge the object into the extended object 58 | var merge = function (obj) { 59 | for (var prop in obj) { 60 | if (obj.hasOwnProperty(prop)) { 61 | extended[prop] = obj[prop]; 62 | } 63 | } 64 | }; 65 | 66 | // Loop through each object and conduct a merge 67 | for ( ; i < length; i++ ) { 68 | var obj = arguments[i]; 69 | merge(obj); 70 | } 71 | 72 | return extended; 73 | 74 | }; 75 | 76 | var Luxy = function(){ 77 | this.Targets = []; 78 | this.TargetsLength = 0; 79 | this.wrapper = ''; 80 | this.windowHeight = 0; 81 | this.wapperOffset = 0; 82 | }; 83 | Luxy.prototype = { 84 | isAnimate: false, 85 | isResize : false, 86 | scrollId: "", 87 | resizeId: "", 88 | init : function(options){ 89 | this.settings = extend(defaults, options || {}); 90 | this.wrapper = document.querySelector(this.settings.wrapper); 91 | 92 | if(this.wrapper==="undefined"){ 93 | return false; 94 | } 95 | this.targets = document.querySelectorAll(this.settings.targets); 96 | document.body.style.height = this.wrapper.clientHeight + 'px'; 97 | 98 | this.windowHeight = window.clientHeight; 99 | this.attachEvent(); 100 | this.apply(this.targets,this.wrapper); 101 | this.animate(); 102 | this.resize(); 103 | }, 104 | apply : function(targets,wrapper){ 105 | this.wrapperInit(); 106 | 107 | this.targetsLength = targets.length; 108 | for (var i = 0; i < this.targetsLength; i++) { 109 | var attr = { 110 | offset : targets[i].getAttribute('data-offset'), 111 | speedX : targets[i].getAttribute('data-speed-x'), 112 | speedY : targets[i].getAttribute('data-speed-Y'), 113 | percentage : targets[i].getAttribute('data-percentage'), 114 | horizontal : targets[i].getAttribute('data-horizontal') 115 | }; 116 | this.targetsInit(targets[i],attr); 117 | } 118 | }, 119 | wrapperInit: function(){ 120 | this.wrapper.style.width = '100%'; 121 | this.wrapper.style.position = 'fixed'; 122 | }, 123 | targetsInit: function(elm,attr){ 124 | 125 | this.Targets.push({ 126 | elm : elm, 127 | offset : attr.offset ? attr.offset : 0, 128 | horizontal : attr.horizontal ? attr.horizontal : 0, 129 | top : 0, 130 | left : 0, 131 | speedX : attr.speedX ? attr.speedX : 1, 132 | speedY : attr.speedY ? attr.speedY : 1, 133 | percentage :attr.percentage ? attr.percentage : 0 134 | }); 135 | }, 136 | scroll : function(){ 137 | var scrollTopTmp = document.documentElement.scrollTop || document.body.scrollTop; 138 | this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 139 | var offsetBottom = this.scrollTop + this.windowHeight; 140 | this.wrapperUpdate(this.scrollTop); 141 | for (var i = 0; i < this.Targets.length; i++) { 142 | this.targetsUpdate(this.Targets[i]); 143 | } 144 | }, 145 | animate : function(){ 146 | this.scroll(); 147 | this.scrollId = requestAnimationFrame(this.animate.bind(this)); 148 | }, 149 | wrapperUpdate : function(){ 150 | 151 | this.wapperOffset += (this.scrollTop - this.wapperOffset) * this.settings.wrapperSpeed; 152 | this.wrapper.style.transform = 'translate3d(' + 0 + ',' + Math.round(-this.wapperOffset* 100) / 100 + 'px ,' + 0 + ')'; 153 | }, 154 | targetsUpdate : function(target){ 155 | target.top += (this.scrollTop * Number(this.settings.targetSpeed) * Number(target.speedY) - target.top) * this.settings.targetPercentage; 156 | target.left += (this.scrollTop * Number(this.settings.targetSpeed) * Number(target.speedX) - target.left) * this.settings.targetPercentage; 157 | var targetOffsetTop = ( parseInt(target.percentage) - target.top - parseInt(target.offset) ); 158 | var offsetY = Math.round(targetOffsetTop * -100) / 100; 159 | var offsetX = 0; 160 | if(target.horizontal){ 161 | var targetOffsetLeft = ( parseInt(target.percentage) - target.left - parseInt(target.offset) ); 162 | offsetX = Math.round(targetOffsetLeft * -100) / 100; 163 | } 164 | target.elm.style.transform = 'translate3d(' + offsetX + 'px ,' + offsetY + 'px ,' + 0 +')'; 165 | }, 166 | resize: function(){ 167 | var self = this; 168 | self.windowHeight = (window.innerHeight || document.documentElement.clientHeight || 0); 169 | if( parseInt(self.wrapper.clientHeight) != parseInt(document.body.style.height)){ 170 | document.body.style.height = self.wrapper.clientHeight + 'px'; 171 | } 172 | self.resizeId = requestAnimationFrame(self.resize.bind(self)); 173 | }, 174 | attachEvent : function(){ 175 | var self = this; 176 | window.addEventListener('resize',function(){ 177 | if(!self.isResize){ 178 | cancelAnimationFrame(self.resizeId); 179 | cancelAnimationFrame(self.scrollId); 180 | self.isResize = true; 181 | setTimeout(function(){ 182 | self.isResize = false; 183 | self.resizeId = requestAnimationFrame(self.resize.bind(self)); 184 | self.scrollId = requestAnimationFrame(self.animate.bind(self)); 185 | },200); 186 | } 187 | }); 188 | 189 | }, 190 | cancel: function() { 191 | cancelAnimationFrame(this.resizeId); 192 | cancelAnimationFrame(this.scrollId); 193 | this.wrapper.removeAttribute('style'); 194 | for (var i = 0; i < this.Targets.length; i++) { 195 | this.Targets[i].elm.removeAttribute('style'); 196 | } 197 | this.wrapper = ''; 198 | this.Targets = []; 199 | this.windowHeight = 0; 200 | this.wapperOffset = 0; 201 | this.isResize = false; 202 | this.scrollId = ""; 203 | this.resizeId = ""; 204 | }, 205 | }; 206 | 207 | 208 | var luxy = new Luxy(); 209 | 210 | return luxy; 211 | }) 212 | ); 213 | -------------------------------------------------------------------------------- /js/splitting.min.js: -------------------------------------------------------------------------------- 1 | !function(n,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):n.Splitting=t()}(this,function(){"use strict" 2 | var o=document,l=o.createTextNode.bind(o) 3 | function d(n,t,e){n.style.setProperty(t,e)}function f(n,t){return n.appendChild(t)}function p(n,t,e,r){var i=o.createElement("span") 4 | return t&&(i.className=t),e&&(!r&&i.setAttribute("data-"+t,e),i.textContent=e),n&&f(n,i)||i}function h(n,t){return n.getAttribute("data-"+t)}function m(n,t){return n&&0!=n.length?n.nodeName?[n]:[].slice.call(n[0].nodeName?n:(t||o).querySelectorAll(n)):[]}function u(n){for(var t=[];n--;)t[n]=[] 5 | return t}function v(n,t){n&&n.some(t)}function c(t){return function(n){return t[n]}}var a={} 6 | function n(n,t,e,r){return{by:n,depends:t,key:e,split:r}}function r(n){return function t(e,n,r){var i=r.indexOf(e) 7 | if(-1==i){r.unshift(e) 8 | var o=a[e] 9 | if(!o)throw new Error("plugin not loaded: "+e) 10 | v(o.depends,function(n){t(n,e,r)})}else{var u=r.indexOf(n) 11 | r.splice(i,1),r.splice(u,0,e)}return r}(n,0,[]).map(c(a))}function t(n){a[n.by]=n}function g(n,r,i,o,u){n.normalize() 12 | var c=[],a=document.createDocumentFragment() 13 | o&&c.push(n.previousSibling) 14 | var s=[] 15 | return m(n.childNodes).some(function(n){if(!n.tagName||n.hasChildNodes()){if(n.childNodes&&n.childNodes.length)return s.push(n),void c.push.apply(c,g(n,r,i,o,u)) 16 | var t=n.wholeText||"",e=t.trim() 17 | e.length&&(" "===t[0]&&s.push(l(" ")),v(e.split(i),function(n,t){t&&u&&s.push(p(a,"whitespace"," ",u)) 18 | var e=p(a,r,n) 19 | c.push(e),s.push(e)})," "===t[t.length-1]&&s.push(l(" ")))}else s.push(n)}),v(s,function(n){f(a,n)}),n.innerHTML="",f(n,a),c}var s=0 20 | var i="words",e=n(i,s,"word",function(n){return g(n,"word",/\s+/,0,1)}),y="chars",w=n(y,[i],"char",function(n,e,t){var r=[] 21 | return v(t[i],function(n,t){r.push.apply(r,g(n,"char","",e.whitespace&&t))}),r}) 22 | function b(e){var f=(e=e||{}).key 23 | return m(e.target||"[data-splitting]").map(function(a){var s=a["🍌"] 24 | if(!e.force&&s)return s 25 | s=a["🍌"]={el:a} 26 | var n=e.by||h(a,"splitting") 27 | n&&"true"!=n||(n=y) 28 | var t=r(n),l=function(n,t){for(var e in t)n[e]=t[e] 29 | return n}({},e) 30 | return v(t,function(n){if(n.split){var t=n.by,e=(f?"-"+f:"")+n.key,r=n.split(a,l,s) 31 | e&&(i=a,c=(u="--"+e)+"-index",v(o=r,function(n,t){Array.isArray(n)?v(n,function(n){d(n,c,t)}):d(n,c,t)}),d(i,u+"-total",o.length)),s[t]=r,a.classList.add(t)}var i,o,u,c}),a.classList.add("splitting"),s})}function N(n,t,e){var r=m(t.matching||n.children,n),i={} 32 | return v(r,function(n){var t=Math.round(n[e]);(i[t]||(i[t]=[])).push(n)}),Object.keys(i).map(Number).sort(x).map(c(i))}function x(n,t){return n-t}b.html=function(n){var t=(n=n||{}).target=p() 33 | return t.innerHTML=n.content,b(n),t.outerHTML},b.add=t 34 | var T=n("lines",[i],"line",function(n,t,e){return N(n,{matching:e[i]},"offsetTop")}),L=n("items",s,"item",function(n,t){return m(t.matching||n.children,n)}),k=n("rows",s,"row",function(n,t){return N(n,t,"offsetTop")}),A=n("cols",s,"col",function(n,t){return N(n,t,"offsetLeft")}),C=n("grid",["rows","cols"]),M="layout",S=n(M,s,s,function(n,t){var e=t.rows=+(t.rows||h(n,"rows")||1),r=t.columns=+(t.columns||h(n,"columns")||1) 35 | if(t.image=t.image||h(n,"image")||n.currentSrc||n.src,t.image){var i=m("img",n)[0] 36 | t.image=i&&(i.currentSrc||i.src)}t.image&&d(n,"background-image","url("+t.image+")") 37 | for(var o=e*r,u=[],c=p(s,"cell-grid");o--;){var a=p(c,"cell") 38 | p(a,"cell-inner"),u.push(a)}return f(n,c),u}),H=n("cellRows",[M],"row",function(n,t,e){var r=t.rows,i=u(r) 39 | return v(e[M],function(n,t,e){i[Math.floor(t/(e.length/r))].push(n)}),i}),O=n("cellColumns",[M],"col",function(n,t,e){var r=t.columns,i=u(r) 40 | return v(e[M],function(n,t){i[t%r].push(n)}),i}),j=n("cells",["cellRows","cellColumns"],"cell",function(n,t,e){return e[M]}) 41 | return t(e),t(w),t(T),t(L),t(k),t(A),t(C),t(S),t(H),t(O),t(j),b}) 42 | -------------------------------------------------------------------------------- /style/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Render the `main` element consistently in IE. 29 | */ 30 | 31 | main { 32 | display: block; 33 | } 34 | 35 | /** 36 | * Correct the font size and margin on `h1` elements within `section` and 37 | * `article` contexts in Chrome, Firefox, and Safari. 38 | */ 39 | 40 | h1 { 41 | font-size: 2em; 42 | margin: 0.67em 0; 43 | } 44 | 45 | /* Grouping content 46 | ========================================================================== */ 47 | 48 | /** 49 | * 1. Add the correct box sizing in Firefox. 50 | * 2. Show the overflow in Edge and IE. 51 | */ 52 | 53 | hr { 54 | box-sizing: content-box; /* 1 */ 55 | height: 0; /* 1 */ 56 | overflow: visible; /* 2 */ 57 | } 58 | 59 | /** 60 | * 1. Correct the inheritance and scaling of font size in all browsers. 61 | * 2. Correct the odd `em` font sizing in all browsers. 62 | */ 63 | 64 | pre { 65 | font-family: monospace, monospace; /* 1 */ 66 | font-size: 1em; /* 2 */ 67 | } 68 | 69 | /* Text-level semantics 70 | ========================================================================== */ 71 | 72 | /** 73 | * Remove the gray background on active links in IE 10. 74 | */ 75 | 76 | a { 77 | background-color: transparent; 78 | } 79 | 80 | /** 81 | * 1. Remove the bottom border in Chrome 57- 82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 83 | */ 84 | 85 | abbr[title] { 86 | border-bottom: none; /* 1 */ 87 | text-decoration: underline; /* 2 */ 88 | text-decoration: underline dotted; /* 2 */ 89 | } 90 | 91 | /** 92 | * Add the correct font weight in Chrome, Edge, and Safari. 93 | */ 94 | 95 | b, 96 | strong { 97 | font-weight: bolder; 98 | } 99 | 100 | /** 101 | * 1. Correct the inheritance and scaling of font size in all browsers. 102 | * 2. Correct the odd `em` font sizing in all browsers. 103 | */ 104 | 105 | code, 106 | kbd, 107 | samp { 108 | font-family: monospace, monospace; /* 1 */ 109 | font-size: 1em; /* 2 */ 110 | } 111 | 112 | /** 113 | * Add the correct font size in all browsers. 114 | */ 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | /** 121 | * Prevent `sub` and `sup` elements from affecting the line height in 122 | * all browsers. 123 | */ 124 | 125 | sub, 126 | sup { 127 | font-size: 75%; 128 | line-height: 0; 129 | position: relative; 130 | vertical-align: baseline; 131 | } 132 | 133 | sub { 134 | bottom: -0.25em; 135 | } 136 | 137 | sup { 138 | top: -0.5em; 139 | } 140 | 141 | /* Embedded content 142 | ========================================================================== */ 143 | 144 | /** 145 | * Remove the border on images inside links in IE 10. 146 | */ 147 | 148 | img { 149 | border-style: none; 150 | } 151 | 152 | /* Forms 153 | ========================================================================== */ 154 | 155 | /** 156 | * 1. Change the font styles in all browsers. 157 | * 2. Remove the margin in Firefox and Safari. 158 | */ 159 | 160 | button, 161 | input, 162 | optgroup, 163 | select, 164 | textarea { 165 | font-family: inherit; /* 1 */ 166 | font-size: 100%; /* 1 */ 167 | line-height: 1.15; /* 1 */ 168 | margin: 0; /* 2 */ 169 | } 170 | 171 | /** 172 | * Show the overflow in IE. 173 | * 1. Show the overflow in Edge. 174 | */ 175 | 176 | button, 177 | input { /* 1 */ 178 | overflow: visible; 179 | } 180 | 181 | /** 182 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 183 | * 1. Remove the inheritance of text transform in Firefox. 184 | */ 185 | 186 | button, 187 | select { /* 1 */ 188 | text-transform: none; 189 | } 190 | 191 | /** 192 | * Correct the inability to style clickable types in iOS and Safari. 193 | */ 194 | 195 | button, 196 | [type="button"], 197 | [type="reset"], 198 | [type="submit"] { 199 | -webkit-appearance: button; 200 | } 201 | 202 | /** 203 | * Remove the inner border and padding in Firefox. 204 | */ 205 | 206 | button::-moz-focus-inner, 207 | [type="button"]::-moz-focus-inner, 208 | [type="reset"]::-moz-focus-inner, 209 | [type="submit"]::-moz-focus-inner { 210 | border-style: none; 211 | padding: 0; 212 | } 213 | 214 | /** 215 | * Restore the focus styles unset by the previous rule. 216 | */ 217 | 218 | button:-moz-focusring, 219 | [type="button"]:-moz-focusring, 220 | [type="reset"]:-moz-focusring, 221 | [type="submit"]:-moz-focusring { 222 | outline: 1px dotted ButtonText; 223 | } 224 | 225 | /** 226 | * Correct the padding in Firefox. 227 | */ 228 | 229 | fieldset { 230 | padding: 0.35em 0.75em 0.625em; 231 | } 232 | 233 | /** 234 | * 1. Correct the text wrapping in Edge and IE. 235 | * 2. Correct the color inheritance from `fieldset` elements in IE. 236 | * 3. Remove the padding so developers are not caught out when they zero out 237 | * `fieldset` elements in all browsers. 238 | */ 239 | 240 | legend { 241 | box-sizing: border-box; /* 1 */ 242 | color: inherit; /* 2 */ 243 | display: table; /* 1 */ 244 | max-width: 100%; /* 1 */ 245 | padding: 0; /* 3 */ 246 | white-space: normal; /* 1 */ 247 | } 248 | 249 | /** 250 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 251 | */ 252 | 253 | progress { 254 | vertical-align: baseline; 255 | } 256 | 257 | /** 258 | * Remove the default vertical scrollbar in IE 10+. 259 | */ 260 | 261 | textarea { 262 | overflow: auto; 263 | } 264 | 265 | /** 266 | * 1. Add the correct box sizing in IE 10. 267 | * 2. Remove the padding in IE 10. 268 | */ 269 | 270 | [type="checkbox"], 271 | [type="radio"] { 272 | box-sizing: border-box; /* 1 */ 273 | padding: 0; /* 2 */ 274 | } 275 | 276 | /** 277 | * Correct the cursor style of increment and decrement buttons in Chrome. 278 | */ 279 | 280 | [type="number"]::-webkit-inner-spin-button, 281 | [type="number"]::-webkit-outer-spin-button { 282 | height: auto; 283 | } 284 | 285 | /** 286 | * 1. Correct the odd appearance in Chrome and Safari. 287 | * 2. Correct the outline style in Safari. 288 | */ 289 | 290 | [type="search"] { 291 | -webkit-appearance: textfield; /* 1 */ 292 | outline-offset: -2px; /* 2 */ 293 | } 294 | 295 | /** 296 | * Remove the inner padding in Chrome and Safari on macOS. 297 | */ 298 | 299 | [type="search"]::-webkit-search-decoration { 300 | -webkit-appearance: none; 301 | } 302 | 303 | /** 304 | * 1. Correct the inability to style clickable types in iOS and Safari. 305 | * 2. Change font properties to `inherit` in Safari. 306 | */ 307 | 308 | ::-webkit-file-upload-button { 309 | -webkit-appearance: button; /* 1 */ 310 | font: inherit; /* 2 */ 311 | } 312 | 313 | /* Interactive 314 | ========================================================================== */ 315 | 316 | /* 317 | * Add the correct display in Edge, IE 10+, and Firefox. 318 | */ 319 | 320 | details { 321 | display: block; 322 | } 323 | 324 | /* 325 | * Add the correct display in all browsers. 326 | */ 327 | 328 | summary { 329 | display: list-item; 330 | } 331 | 332 | /* Misc 333 | ========================================================================== */ 334 | 335 | /** 336 | * Add the correct display in IE 10+. 337 | */ 338 | 339 | template { 340 | display: none; 341 | } 342 | 343 | /** 344 | * Add the correct display in IE 10. 345 | */ 346 | 347 | [hidden] { 348 | display: none; 349 | } -------------------------------------------------------------------------------- /style/style.css: -------------------------------------------------------------------------------- 1 | /* 1.1.general-setting-pages *************************/ 2 | /****************************************************/ 3 | :root { 4 | --pr-color: #fff; 5 | --second-color: #0a0a0a; 6 | --cubicbz: cubic-bezier(.9, 0, .1, 1); 7 | --fz-big: 60px; 8 | } 9 | 10 | * { 11 | box-sizing: border-box; 12 | font-family: 'Syne', sans-serif; 13 | font-weight: 800; 14 | margin: 0; 15 | padding: 0; 16 | font-feature-settings: 'pnum' on, 'lnum' on; 17 | } 18 | 19 | body { 20 | background: var(--second-color); 21 | } 22 | 23 | /******************************************/ 24 | section { 25 | padding-top: 150px; 26 | padding-bottom: 50px; 27 | } 28 | 29 | .wrapp { 30 | width: 100%; 31 | height: auto; 32 | overflow: hidden; 33 | z-index: 1; 34 | } 35 | 36 | .content { 37 | width: 100%; 38 | padding: 0 70px; 39 | } 40 | 41 | .char { 42 | display: inline-block; 43 | } 44 | 45 | /* Paralax Effect On GSAP **********************************/ 46 | /* header ********/ 47 | .header { 48 | position: relative; 49 | display: flex; 50 | padding: 0 70px; 51 | justify-content: center; 52 | align-items: center; 53 | width: 100%; 54 | height: 100vh; 55 | } 56 | 57 | .header__marq { 58 | position: absolute; 59 | bottom: 0; 60 | left: 0; 61 | } 62 | 63 | .header__marq { 64 | width: 100%; 65 | height: auto; 66 | background: #171717; 67 | overflow: hidden; 68 | } 69 | 70 | .header__marq-wrapp { 71 | display: flex; 72 | width: 100%; 73 | height: auto; 74 | padding: 8px 70px; 75 | } 76 | 77 | .header__marq-txt { 78 | position: relative; 79 | flex: 0 0 auto; 80 | display: inline-block; 81 | padding-right: 55px; 82 | margin-right: 15px; 83 | text-transform: uppercase; 84 | color: var(--pr-color); 85 | color: #9e9e9e; 86 | font-size: 35px; 87 | } 88 | 89 | .header__marq-star { 90 | position: absolute; 91 | width: 40px; 92 | height: 40px; 93 | right: 0; 94 | } 95 | 96 | .header__marq-star img { 97 | display: block; 98 | width: 100%; 99 | height: 100%; 100 | } 101 | 102 | .title { 103 | position: relative; 104 | margin: 0; 105 | font-size: 85px; 106 | text-align: center; 107 | color: var(--pr-color); 108 | text-transform: uppercase; 109 | mix-blend-mode: difference; 110 | z-index: 2; 111 | } 112 | 113 | .title_paralax { 114 | display: inline-block; 115 | will-change: transform; 116 | } 117 | 118 | .title .stroke { 119 | display: inline-block; 120 | color: transparent; 121 | -webkit-text-stroke: 1px var(--pr-color); 122 | } 123 | 124 | .header__img { 125 | position: absolute; 126 | width: 45%; 127 | height: 100%; 128 | top: 0; 129 | right: 100px; 130 | clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); 131 | overflow: hidden; 132 | } 133 | 134 | .header__img img { 135 | display: block; 136 | width: 100%; 137 | height: 100%; 138 | object-fit: cover; 139 | } 140 | 141 | .section-title { 142 | position: relative; 143 | margin: 0; 144 | margin-bottom: 60px; 145 | line-height: .8; 146 | font-size: 70px; 147 | text-align: center; 148 | color: var(--pr-color); 149 | text-transform: uppercase; 150 | } 151 | 152 | .section-title .stroke { 153 | color: transparent; 154 | -webkit-text-stroke: 1px var(--pr-color); 155 | } 156 | 157 | .section-title__square { 158 | position: absolute; 159 | display: inline-block; 160 | width: 130px; 161 | height: 130px; 162 | border: 1px solid #4b4b4b; 163 | top: 50%; 164 | left: 50%; 165 | transform: translate(-50%, -50%); 166 | z-index: -1; 167 | } 168 | 169 | /* about ********/ 170 | .about .section-title { 171 | text-align: left; 172 | } 173 | 174 | .about__wrapp { 175 | display: flex; 176 | justify-content: space-between; 177 | } 178 | 179 | .about__img, 180 | .about__txt { 181 | width: calc(50% - 35px); 182 | height: auto; 183 | } 184 | 185 | .about__txt { 186 | padding-right: 70px; 187 | } 188 | 189 | .about__p { 190 | line-height: 1.4; 191 | font-size: 20px; 192 | color: #4b4b4b; 193 | } 194 | 195 | .about__img { 196 | height: 100vh; 197 | overflow: hidden; 198 | } 199 | 200 | .about__img img { 201 | display: block; 202 | width: 100%; 203 | height: 100%; 204 | object-fit: cover; 205 | } 206 | 207 | /* benefits ********/ 208 | .benefits__list { 209 | display: flex; 210 | flex-wrap: wrap; 211 | justify-content: center; 212 | gap: 40px; 213 | width: 100%; 214 | height: auto; 215 | } 216 | 217 | .benefits__item { 218 | list-style: none; 219 | width: calc(33.33% - 27px); 220 | } 221 | 222 | .benefits__num { 223 | display: inline-block; 224 | font-size: 60px; 225 | color: transparent; 226 | -webkit-text-stroke: 1px var(--pr-color); 227 | } 228 | 229 | .benefits__p { 230 | font-size: 20px; 231 | color: #4b4b4b; 232 | } 233 | 234 | /* work ********/ 235 | .work { 236 | padding-top: 150px; 237 | } 238 | 239 | .work__wrapp { 240 | display: flex; 241 | flex-wrap: wrap; 242 | row-gap: 120px; 243 | justify-content: space-between; 244 | padding: 0 120px; 245 | } 246 | 247 | .work__item { 248 | position: relative; 249 | width: calc(50% - 60px); 250 | height: 100vh; 251 | } 252 | 253 | .work__item-num { 254 | position: absolute; 255 | display: inline-block; 256 | font-size: 70px; 257 | color: var(--pr-color); 258 | mix-blend-mode: difference; 259 | z-index: 2; 260 | } 261 | 262 | .work__item-img { 263 | width: 100%; 264 | height: 100%; 265 | overflow: hidden; 266 | } 267 | 268 | .work__item-img img { 269 | display: block; 270 | width: 100%; 271 | height: 100%; 272 | object-fit: cover; 273 | } 274 | 275 | /* serv ********/ 276 | .serv__item { 277 | position: relative; 278 | padding: 40px 0; 279 | border-bottom: 1px solid #2f2e2e; 280 | } 281 | 282 | .serv__item-arrow { 283 | position: absolute; 284 | display: inline-block; 285 | width: 55px; 286 | height: 55px; 287 | top: 50%; 288 | right: 0; 289 | transform: translateY(-50%); 290 | } 291 | 292 | .serv__item-arrow img { 293 | display: block; 294 | width: 100%; 295 | height: 100%; 296 | object-fit: contain; 297 | transform: rotate(180deg); 298 | } 299 | 300 | .serv__item-txt { 301 | font-size: 50px; 302 | color: #4b4b4b; 303 | text-transform: uppercase; 304 | } 305 | 306 | /* footer ********/ 307 | .footer { 308 | display: flex; 309 | align-items: center; 310 | justify-content: center; 311 | height: 100vh; 312 | } 313 | 314 | .footer__div { 315 | font-size: 70px; 316 | letter-spacing: 15px; 317 | color: var(--pr-color); 318 | text-transform: uppercase; 319 | } 320 | 321 | .footer__div span { 322 | display: inline-block; 323 | } --------------------------------------------------------------------------------