Skip to content

Instantly share code, notes, and snippets.

@aez

aez/Kpyvrd.markdown

Created June 24, 2015 06:49
Show Gist options
  • Save aez/450ceb94235c3c1685c3 to your computer and use it in GitHub Desktop.
Save aez/450ceb94235c3c1685c3 to your computer and use it in GitHub Desktop.
Download ZIP
Kpyvrd
Raw
index.html
body
.background
img src="http://placehold.it/3840x2160/2345ab"
.margins
.bottom
img src="http://placehold.it/200x200"
img src="http://placehold.it/200x200"
img src="http://placehold.it/200x200"
img src="http://placehold.it/200x200"
img src="http://placehold.it/200x200"
img src="http://placehold.it/200x200"
img src="http://placehold.it/200x200"
Raw
script.js
$( () => {
$('.margins .bottom img')
.on('mouseover', (e) => {
$(e.target).velocity({translateY: "-261px"}, {queue: false});
})
.on('mouseout', e => $(e.target).velocity({translateY: "0"}, {queue: false}))
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.1.4/zepto.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.js"></script>
Raw
style.css
.background {
position: absolute;
width: 100vw;
height: 100vh;
img {
width: 100%;
height: 100%;
}
}
.margins .bottom {
position: absolute;
bottom: 0;
background-color: rgba(0,0,0, 0.5);
width: 100%;
height: 200px;
display: flex;
justify-content: space-between;
img {
display: inline-block;
position: relative;
top: 0;
opacity: 0.35;
transition: opacity 0.3s ease;
&:hover {
opacity: 1;
}
}
}
@aez
Copy link
Author

aez commented Jun 24, 2015

@jimredd check this out! Starting out with some very simple motion play, with some of the tools we talked about (velocity, babel)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment