Free Code Camp Zipline: Build a Personal Portfolio Webpage
A Pen by Jeannie Stevenson on CodePen.
// vendor color defs | |
$google: #db4437; | |
$youtube: #f00; | |
$facebook: #3b5998; | |
$twitter: #1da1f2; | |
$instagram: #231f20; | |
$instagramGrad: linear-gradient(45deg, #ffd521 24%, #f50000 50%, #b900b4 76%); | |
// vendor link classes |
Free Code Camp Zipline: Build a Personal Portfolio Webpage
A Pen by Jeannie Stevenson on CodePen.
Free Code Camp Zipline: Build a Random Quote Machine
A Pen by Jeannie Stevenson on CodePen.
// set .form to display: none in css | |
function showForm() { | |
$('.form-switch').click(function() { | |
if ($(this).is(':checked')) { | |
$('.form').slideDown('slow'); | |
} else { | |
$('.form').slideUp('slow'); | |
} |
@-webkit-keyframes pop-in { | |
0% { opacity: 0; } | |
1% { opacity: 0; -webkit-transform: scale(0.98) translateY(-30px); } | |
80% { -webkit-transform: scale(1); } | |
100% { -webkit-transform: translateY(0); } | |
} | |
@-moz-keyframes pop-in { | |
0% { opacity: 0; } | |
1% { opacity: 0; -moz-transform: scale(0.98) translateY(-30px); } | |
80% { -moz-transform: scale(1); } |
$(document).ready(function() { | |
// THIS IS SO CONFUSING! | |
if ($(window).width() >= 380) { | |
// NEST! | |
if ($(window).width() >= 680) { | |
// NEST AGAIN! |
$(document).ready(function() { | |
$(window).scroll(function(){ | |
var eOT = $('#sH').offset().top; //distance sidebar is from the top of the page | |
if($(window).width() >= 992){ | |
var yPT = $(window).scrollTop(); //distance the page has scrolled | |
//if the distance the page has scrolled is larger than the distance the sidebar is from the top, run | |
if(yPT > eOT){ | |
var yPosW = $(window).scrollTop(); //distance the page has scrolled |
$(document).ready(function() { | |
$(window).scroll( function(){ | |
// slide in from left to right | |
$('.slide-right').each(function() { | |
var objBot = $(this).offset().top + $(this).outerHeight(); | |
var winBot = $(window).scrollTop() + $(window).height(); | |
if( winBot > objBot ){ |
$(document).ready(function() { | |
// math | |
// NEW height = VARIABLE width * original height / original width | |
// NEW width = VARIABLE height * original width / original height | |
// known knowns | |
// images must not be set to any max-width | |
// if image aspect ratio is less than one, it's a vertical image | |
// if image aspect ratio is greater than one, it's a horizontal image | |
// if image aspect ratio is less than box aspect ratio, it is more taller than wider than the box |