diff --git a/css/layout1.sass b/css/layout1.sass index c3881e8..cfa0bc1 100644 --- a/css/layout1.sass +++ b/css/layout1.sass @@ -67,3 +67,20 @@ img position: absolute left: 50% margin-left: -480px + + + +// Model Grid + +.clothes-pics + + figure + margin-bottom: 20px + position: relative + opacity: 0 + transform: translateX(20px) + transition: all 0.3s ease-in-out + + &.is-showing + opacity: 1 + transform: translateX(0px) diff --git a/css/style.css b/css/style.css index ea67ce2..85fcdbe 100644 --- a/css/style.css +++ b/css/style.css @@ -914,3 +914,13 @@ img { position: absolute; left: 50%; margin-left: -480px; } + +.clothes-pics figure { + margin-bottom: 20px; + position: relative; + opacity: 0; + transform: translateX(20px); + transition: all 0.3s ease-in-out; } + .clothes-pics figure.is-showing { + opacity: 1; + transform: translateX(0px); } diff --git a/index.html b/index.html index ef26b7a..41bbbe2 100644 --- a/index.html +++ b/index.html @@ -21,6 +21,23 @@

Clothing Store

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa.

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/index.jade b/index.jade index 63fab86..3623f01 100644 --- a/index.jade +++ b/index.jade @@ -29,6 +29,39 @@ html(lang="en") hr + .clothes-pics + + .row.img-row + figure.columns.four + img(src="/images/model1.jpg") + + figure.columns.four + img(src="/images/model2.jpg") + + figure.columns.four + img(src="/images/model3.jpg") + + .row.img-row + figure.columns.four + img(src="/images/model2.jpg") + + figure.columns.four + img(src="/images/model3.jpg") + + figure.columns.four + img(src="/images/model1.jpg") + + .row.img-row + figure.columns.four + img(src="/images/model3.jpg") + + figure.columns.four + img(src="/images/model1.jpg") + + figure.columns.four + img(src="/images/model2.jpg") + + div(style="height: 2000px") diff --git a/js/functions.js b/js/functions.js index 851342e..2e09c44 100644 --- a/js/functions.js +++ b/js/functions.js @@ -14,4 +14,15 @@ $(window).scroll(function(){ 'transform' : 'translate(0px, -'+ wScroll /40 +'%)' }); + if(wScroll > $('.clothes-pics').offset().top - ($(window).height() / 1.2)) { + + $('.clothes-pics figure').each(function(i){ + + setTimeout(function(){ + $('.clothes-pics figure').eq(i).addClass('is-showing'); + }, 150 * (i+1)); + }); + + } + }); diff --git a/js/min/functions-min.js b/js/min/functions-min.js index 266b986..b0a70be 100644 --- a/js/min/functions-min.js +++ b/js/min/functions-min.js @@ -1,19 +1 @@ -$(window).scroll(function(){ - - var wScroll = $(this).scrollTop(); - - $('.logo').css({ - 'transform' : 'translate(0px, '+ wScroll /2 +'%)' - }); - - $('.back-bird').css({ - 'transform' : 'translate(0px, '+ wScroll /4 +'%)' - }); - - $('.fore-bird').css({ - 'transform' : 'translate(0px, -'+ wScroll /40 +'%)' - }); - -}); - - +$(window).scroll(function(){var s=$(this).scrollTop();$(".logo").css({transform:"translate(0px, "+s/2+"%)"}),$(".back-bird").css({transform:"translate(0px, "+s/4+"%)"}),$(".fore-bird").css({transform:"translate(0px, -"+s/40+"%)"}),s>$(".clothes-pics").offset().top-$(window).height()/1.2&&$(".clothes-pics figure").each(function(s){setTimeout(function(){$(".clothes-pics figure").eq(s).addClass("is-showing")},150*(s+1))})}); \ No newline at end of file diff --git a/readme.html b/readme.html new file mode 100644 index 0000000..084f898 --- /dev/null +++ b/readme.html @@ -0,0 +1,39 @@ +

Parallax On The Web - Project Files

+ +

Video Series for free on YouTube on the DevTips Channel

+ +

Releases

+ +

Releases correspond to the videos. Visit the releases page on this repo to find the specific state of the code base. In other words; if you are watching video 2 and want to grab the code form that point. You will want to look for that here, or below.

+ +

Video 1 - “Intro to Parallax on the Web”

+ +


Watch on YouTube

+ + + + +

Video 2 - “Parallax Header”

+ +


Watch on YouTube

+ + + + +

Video 3 - “Landing Elements”

+ +


Watch on YouTube

+ + + + +
+ +

If this stuff is helpful, consider subscribing to my YouTube Channel

diff --git a/readme.md b/readme.md index 3c95fca..596c92b 100644 --- a/readme.md +++ b/readme.md @@ -21,6 +21,14 @@ Releases correspond to the videos. Visit the releases page on this repo to find - This is where the project starts. [Get the code](https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.0). - This is where the project stops at the end of this video. [Get the code](https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.1). + + +## Video 3 - "Landing Elements" + +
Watch on YouTube + +- Grab the code we wrote in this video. [Get the code](https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.2). + --- _If this stuff is helpful, consider subscribing to my [YouTube Channel](https://www.youtube.com/user/DevTipsForDesigners)_