CSS modal slide up animation with FB-ish zoom on scroll

Developer
Adrian Payne
Size
5,349 Kb
Views
14,168
  1. CSS modal slide up animation with FB-ish zoom on scroll Previews
  2. CSS modal slide up animation with FB-ish zoom on scroll HTML Codes
  3. CSS modal slide up animation with FB-ish zoom on scroll CSS Codes
  4. CSS modal slide up animation with FB-ish zoom on scroll JS Codes

How do I make an css modal slide up animation with fb-ish zoom on scroll?

Click a card with a blue border to open the modal. Scroll inside the modal. Just showing what can be achieved with simple transforms. Despite the length of the CSS here, the CSS and JS for the animations are really quite minimal.. What is a css modal slide up animation with fb-ish zoom on scroll? How do you make a css modal slide up animation with fb-ish zoom on scroll? This script and codes were developed by Adrian Payne on 11 December 2022, Sunday.

CSS modal slide up animation with FB-ish zoom on scroll Previews
IQ Test

CSS modal slide up animation with FB-ish zoom on scroll - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS modal slide up animation with FB-ish zoom on scroll</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="c-device"> <div class="c-screen"> <div class="c-overflow-container"> <header class="c-header">MADRA</header> <main class="c-main"> <div class="c-card" role="button"> <h1 class="c-main__title">Click me!</h1> <p>Is maith liom gach sort madra agus ainmhithe!</p> </div> <iframe class="c-video" src="https://www.youtube.com/embed/SGlx27Iu8xA" frameborder="0" allowfullscreen></iframe> <div class="c-card" role="button"> <h1 class="c-main__title">An maith leat madra?</h1> <p>Is maith liom gach sort madra agus ainmhithe!</p> </div> <div class="c-card" role="button"> <h1 class="c-main__title">An maith leat madra?</h1> <p>Is maith liom gach sort madra agus ainmhithe!</p> </div> <div class="c-card" role="button"> <h1 class="c-main__title">An maith leat madra?</h1> <p>Is maith liom gach sort madra agus ainmhithe!</p> </div> <div class="c-modal"> <h2>Scroll me!</h2> <p>Dia dhuit, a chara! Conas atá tú inniú?</p> <img class="c-image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/62105/15043664_1792279447680055_3799588495383592960_n.jpg" alt="Sunny resort poolside"/> <img class="c-image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/62105/15099434_1154472367974900_6950258868869922816_n.jpg" alt="Pier extending out into the ocean"/> <img class="c-image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/62105/18809000_1861675280752380_4576437750110093312_n.jpg" alt="Woman stand-up paddling on a lake"/> <button aria-label="close card popup" class="c-modal__close">&times;</button> </div> <div class="c-overlay"></div> </main> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

CSS modal slide up animation with FB-ish zoom on scroll - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,700,900");
*, *:after, *:before { box-sizing: border-box;
}
body { background: #222; color: #222; font-family: 'Roboto', sans-serif; overflow: hidden;
}
p { line-height: 1.5; margin: 0;
}
p:not(:last-child) { margin-bottom: 10px;
}
.c-main__title { font-size: 18px; margin-top: 0; margin-bottom: 4px;
}
.c-device { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62105/phone.png"); width: 324px; height: 649px; margin: 1em auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.c-screen { background: #eee; border-radius: 4px; height: 508px; position: relative; width: 288px;
}
.c-screen:after { box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3); content: ''; display: block; height: 100%; pointer-events: none; position: absolute; top: 0; width: 100%;
}
.c-overflow-container { -webkit-perspective: 1000px; perspective: 1000px; overflow: hidden; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
}
.c-header { border-bottom: 1px solid #e2e2e2; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #fff; color: #333; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 1.2rem; font-weight: 800; height: 60px; position: relative; padding: 1em; z-index: 100;
}
.c-main { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62105/15043664_1792279447680055_3799588495383592960_n.jpg"); background-size: cover; padding: 1em; height: calc(100% - 60px); position: relative; overflow-y: scroll;
}
.c-card { background: #fff; padding: 1em; border-left: 6px solid dodgerblue; margin-bottom: 10px;
}
.c-card--borderless { border: none;
}
.c-video { border-left: 6px solid firebrick; width: 100%; margin-bottom: 10px;
}
.c-image { display: block; width: 100%;
}
.c-image:not(:last-child) { margin-bottom: 10px;
}
.c-overlay { background: rgba(0, 0, 0, 0.5); height: 100%; left: 0; opacity: 0; position: fixed; top: 0; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; visibility: hidden; width: 100%; z-index: 9;
}
.c-modal { background: #fff; bottom: -2em; left: 0; opacity: 0; overflow-y: scroll; padding: 1em 1em 2.5em 1em; position: fixed; right: 0; top: 50px; -webkit-transform: translateY(100%) rotateX(90deg); transform: translateY(100%) rotateX(90deg); -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; visibility: hidden; z-index: 10;
}
.c-modal__close { background: none; border: none; color: #fff; background: darkslategrey; font-size: 2rem; line-height: 0; height: 40px; position: absolute; right: 10px; top: 10px; width: 40px; border-radius: 50%; z-index: 15; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out;
}
.c-modal--show { visibility: visible; -webkit-transform: translateY(0%) rotateX(0deg) scale(0.9); transform: translateY(0%) rotateX(0deg) scale(0.9); opacity: 1;
}
.c-modal--show ~ .c-overlay { opacity: 1; visibility: visible;
}
.c-modal--zoom { -webkit-transform: translateY(0%) rotateX(0deg) scale(1); transform: translateY(0%) rotateX(0deg) scale(1);
}

CSS modal slide up animation with FB-ish zoom on scroll - Script Codes JS Codes

'use strict';
var cards = document.querySelectorAll('.c-card');
var modal = document.querySelector('.c-modal');
var close = document.querySelector('.c-modal__close');
var revealModal = 'c-modal--show';
var zoomModal = 'c-modal--zoom';
var ticking = false;
for (var i = 0; i < cards.length; i++) { cards[i].addEventListener("click", function (event) { modal.classList.add(revealModal); });
}
close.addEventListener("click", function (event) { modal.classList.remove(revealModal); modal.scrollTo(0, 0);
});
modal.addEventListener('scroll', function (e) { if (!ticking) { window.requestAnimationFrame(function () { if (e.target.scrollTop > 10) { modal.classList.add(zoomModal); } else { modal.classList.remove(zoomModal); } ticking = false; }); } ticking = true;
});
CSS modal slide up animation with FB-ish zoom on scroll - Script Codes
CSS modal slide up animation with FB-ish zoom on scroll - Script Codes
Home Page Home
Developer Adrian Payne
Username dazulu
Uploaded December 11, 2022
Rating 3
Size 5,349 Kb
Views 14,168
Do you need developer help for CSS modal slide up animation with FB-ish zoom on scroll?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Adrian Payne (dazulu) Script Codes
Name
CSS Ribbons
CSS Flame Animation
CSS butterfly
CSS Shop Icon
Animation Label Transition
Simple Advent calendar with message
Pure CSS RSS Icon
Round and round we go...
A Pen by Adrian Payne
Code Against Humanity
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!