A gallery that reveals three panels as the user scrolls.
A Pen by Teegan Lincoln on CodePen.
<div class="header"> | |
<h1>Scroll Down</h1> | |
<i class="fa fa-angle-down animated bounce"></i> | |
</div> | |
<div class="section animate"> | |
<div class="middle"> | |
<img src="https://placeimg.com/640/640/nature/color" /> | |
</div> | |
<div class="left title"> | |
<div class="content"> | |
<h2>A glorious nature shot.</h2> | |
<p>Wow. What a wonderful image. And look! there are even more images on the right side. Amazing. If you click below, I bet you'll get teleported to a magical land.</p> | |
<a href="#" class="btn-primary">Learn more</a> | |
</div> | |
</div> | |
<div class="right tiles"> | |
<img src="https://placeimg.com/900/900/nature/color" /> | |
<img src="https://placeimg.com/200/200/nature/color" /> | |
<img src="https://placeimg.com/300/300/nature/color" /> | |
<img src="https://placeimg.com/400/400/nature/color" /> | |
</div> | |
</div> | |
<div class="section"> | |
<div class="middle"> | |
<img src="https://placeimg.com/640/640/people/color" /> | |
</div> | |
<div class="right title"> | |
<div class="content"> | |
<h2>Check out this guy.</h2> | |
<p>What an interesting looking person! I wonder if they've ever climbed Mount Everest, or seen the Egyptian Pyramids. If not, I hope that one day they get to. You go random stock image person! Follow your dreams!</p> | |
</div> | |
</div> | |
<div class="left tiles"> | |
<img src="https://placeimg.com/100/100/people/color" /> | |
<img src="https://placeimg.com/200/200/people/color" /> | |
<img src="https://placeimg.com/300/300/people/color" /> | |
<img src="https://placeimg.com/400/400/people/color" /> | |
</div> | |
</div> | |
<div class="section"> | |
<div class="middle"> | |
<img src="https://placeimg.com/620/620/arch/color" /> | |
</div> | |
<div class="left title"> | |
<div class="content"> | |
<h2>That is one pretty building.</h2> | |
<p>I once thought about becoming an architect. I wanted to create a house fit for a king. But then I failed maths. So I became a frontend developer instead.</p> | |
</div> | |
</div> | |
<div class="right tiles"> | |
<img src="https://placeimg.com/100/100/arch/color" /> | |
<img src="https://placeimg.com/150/150/arch/color" /> | |
<img src="https://placeimg.com/300/300/arch/color" /> | |
<img src="https://placeimg.com/350/350/arch/color" /> | |
</div> | |
</div> | |
<div class="section"> | |
<div class="middle"> | |
<img src="https://placeimg.com/410/410/tech/color" /> | |
</div> | |
<div class="right title"> | |
<div class="content"> | |
<h2>The future is now.</h2> | |
<p>Check out that technology! Imagine if we went back in time and put one of those in the hands of a neanderthal. Do you think they'd be impressed, or just try to club us to death?</p> | |
</div> | |
</div> | |
<div class="left tiles"> | |
<img src="https://placeimg.com/900/900/tech/color" /> | |
<img src="https://placeimg.com/140/140/tech/color" /> | |
<img src="https://placeimg.com/750/750/tech/color" /> | |
<img src="https://placeimg.com/400/400/tech/color" /> | |
</div> | |
</div> | |
<div class="footer"> | |
<i class="fa fa-angle-up animated bounce"></i> | |
<h1>Scroll Up</h1> | |
</div> |
$(document).ready(function(){ | |
var $sm = 480; | |
var $md = 768; | |
function resizeThis() { | |
$imgH = $('.middle img').width(); | |
if ($(window).width() >= $sm) { | |
$('.left,.right,.section').css('height', $imgH); | |
} else { | |
$('.left,.right,.section').css('height', 'auto'); | |
} | |
} | |
resizeThis(); | |
$(window).resize(function(){ | |
resizeThis(); | |
}); | |
$(window).scroll(function() { | |
$('.section').each(function(){ | |
var $elementPos = $(this).offset().top; | |
var $scrollPos = $(window).scrollTop(); | |
var $sectionH = $(this).height(); | |
var $h = $(window).height(); | |
var $sectionVert = (($h/2)-($sectionH/4)); | |
if (($elementPos - $sectionVert) <= $scrollPos && ($elementPos - $sectionVert) + $sectionH > $scrollPos) { | |
$(this).addClass('animate'); | |
} else { | |
$(this).removeClass('animate'); | |
} | |
}); | |
}); | |
$('.btn-primary').click(function(){ | |
alert('I lied'); | |
}); | |
}); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
A gallery that reveals three panels as the user scrolls.
A Pen by Teegan Lincoln on CodePen.
@mixin vertical-align { | |
position: relative; | |
top: 50%; | |
-webkit-transform: translateY(-50%); | |
-ms-transform: translateY(-50%); | |
transform: translateY(-50%); | |
} | |
@mixin transition { | |
-moz-transition: 0.3s ease-in-out all; | |
-o-transition: 0.3s ease-in-out all; | |
-webkit-transition: 0.3s ease-in-out all; | |
transition: 0.3s ease-in-out all; | |
} | |
@mixin filter($filter) { | |
-webkit-filter: $filter; | |
-moz-filter: $filter; | |
-o-filter: $filter; | |
} | |
@import url(https://fonts.googleapis.com/css?family=Roboto:300,900); | |
$sm: 480px; | |
$md: 768px; | |
$lg: 992px; | |
body { | |
font-family: 'Roboto', sans-serif; | |
} | |
.header, .footer { | |
//height: 350px; | |
background: #2e2e2e; | |
color: #fff; | |
padding: 30px; | |
text-align:center; | |
//box-sizing: border-box; | |
@media (min-width: $md) { | |
padding: 100px 30px; | |
} | |
h1 { | |
font-size: 4em; | |
font-weight: 300; | |
} | |
i.fa { | |
font-size: 4em; | |
} | |
.bounce { | |
-webkit-animation-name: bounce; | |
animation-name: bounce; | |
-webkit-transform-origin: center bottom; | |
transform-origin: center bottom; | |
animation-iteration-count: infinite; | |
-webkit-animation-iteration-count: infinite; | |
} | |
.animated { | |
-webkit-animation-duration: 2s; | |
animation-duration: 2s; | |
-webkit-animation-fill-mode: both; | |
animation-fill-mode: both; | |
} | |
} | |
.section { | |
width: 100%; | |
position: relative; | |
//height: 300px; | |
.left, .middle, .right { | |
width:100%; | |
display: block; | |
color: #fff; | |
box-sizing: border-box; | |
left: 0; | |
padding: 30px; | |
text-align:center; | |
overflow:hidden; | |
@include transition; | |
.content { | |
@media (min-width: $sm) { | |
@include vertical-align(); | |
} | |
} | |
@media (min-width: $sm) { | |
width: 50%; | |
font-size:0.9em; | |
padding: 10px; | |
left: 0; | |
float: left; | |
position: absolute; | |
} | |
@media (min-width: $md) { | |
width: 33.33333%; | |
left: 33.33%; | |
padding: 10px; | |
} | |
@media (min-width: $lg) { | |
padding: 30px; | |
font-size: 1em; | |
} | |
} | |
&.animate { | |
.left { | |
left:0; | |
@media (min-width: $sm) { | |
left: 50%; | |
} | |
@media (min-width: $md) { | |
left:0; | |
} | |
} | |
.right { | |
left:0; | |
@media (min-width: $sm) { | |
left: 50%; | |
} | |
@media (min-width: $md) { | |
left:66.66%; | |
} | |
} | |
} | |
.title { | |
background: tomato; | |
h2 { | |
margin-top:0; | |
} | |
p { | |
line-height:1.55em; | |
margin-bottom: 0.75em; | |
} | |
.btn-primary { | |
color: #fff; | |
background: darken(tomato, 10%); | |
padding: 10px; | |
text-decoration:none; | |
border-radius: 3px; | |
display:inline-block; | |
@include transition; | |
&:hover { | |
background: darken(tomato, 15%); | |
} | |
} | |
} | |
.tiles { | |
padding:0; | |
background: #fff; | |
clear:both; | |
display:none; | |
float:none; | |
img { | |
width:50%; | |
float:left; | |
height:auto; | |
opacity: 0.7; | |
@include transition; | |
@include filter(grayscale(100%)); | |
&:hover { | |
opacity:1; | |
@include filter(grayscale(0%)); | |
} | |
} | |
@media (min-width: $md) { | |
display:block; | |
} | |
} | |
.middle { | |
background: slategray; | |
z-index: 2; | |
padding:0; | |
img { | |
width: 100%; | |
height: auto; | |
display:block; | |
} | |
} | |
} | |
@-webkit-keyframes bounce { | |
0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} | |
40% {-webkit-transform: translateY(-20px);} | |
60% {-webkit-transform: translateY(-10px);} | |
} | |
@keyframes bounce { | |
0%, 20%, 50%, 80%, 100% {transform: translateY(0);} | |
40% {transform: translateY(-20px);} | |
60% {transform: translateY(-10px);} | |
} |
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> |
Can you help me out with this? I downloaded the files and when I open the page in my browser it is not displayed like yours.
Here is my html doc:
script src="Js/JavaScript.js" type="text/javascript"></script>
<title></title> link rel="stylesheet" type="text/css" href="Css/StyleSheet.css"> link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> div class="header"> h1>Scroll Down i class="fa fa-angle-down animated bounce"> /div> -->script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
My javascript file:
$(document).ready(function () {
});
and my css file:
@mixin vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
@mixin transition {
-moz-transition: 0.3s ease-in-out all;
-o-transition: 0.3s ease-in-out all;
-webkit-transition: 0.3s ease-in-out all;
transition: 0.3s ease-in-out all;
}
@mixin filter($filter) {
-webkit-filter: $filter;
-moz-filter: $filter;
-o-filter: $filter;
}
@import url(https://fonts.googleapis.com/css?family=Roboto:300,900);
$sm: 480px;
$md: 768px;
$lg: 992px;
body {
font-family: 'Roboto', sans-serif;
}
.header, .footer {
//height: 350px;
background: #2e2e2e;
color: #fff;
padding: 30px;
text-align:center;
//box-sizing: border-box;
@media (min-width: $md) {
padding: 100px 30px;
}
h1 {
font-size: 4em;
font-weight: 300;
}
i.fa {
font-size: 4em;
}
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
.animated {
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
}
.section {
width: 100%;
position: relative;
//height: 300px;
.left, .middle, .right {
width:100%;
display: block;
color: #fff;
box-sizing: border-box;
left: 0;
padding: 30px;
text-align:center;
overflow:hidden;
}
&.animate {
.left {
left:0;
}
.title {
background: tomato;
}
.tiles {
padding:0;
background: #fff;
clear:both;
display:none;
float:none;
}
.middle {
background: slategray;
z-index: 2;
padding:0;
}
}
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
40% {-webkit-transform: translateY(-20px);}
60% {-webkit-transform: translateY(-10px);}
}
@Keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-20px);}
60% {transform: translateY(-10px);}
}