I’m trying to figure out how to create an affect where a screenshot of a website sits behind a iPad with the screen area transparent and the screenshot is animated to scroll to the bottom and then start over again… giving the affect that your scrolling from the top to the bottom of the website.
I created a codepen from some code I pulled from a theme, but it’s a bit overkill with all the unnecessary styles and it doesn’t have the animation affect so I’m trying to design a cleaner version.
here is the codepen
https://codepen.io/aaron4osu/pen/LYOzaPY
here is the html
<section class="my-5">
<div class="container p-5">
<div class="col-md-6">
<div class="front-hero__slider">
<div class="slide slide-1 slide-tablet active" >
<div class="layer layer-1">
<div class="device-wrapper">
<img src="assets/img/tablet.svg" alt="" class="">
<div class="scroll-wrapper">
<img src="assets/img/screenshot.jpg" class="attachment-full size-full" alt="">
</div>
</div>
</div>
<div class="layer layer-2">
<p class="name">Business Name</p>
<a href="#" class="description small">Website and Branding</a>
</div>
</div>
</div>
</div><!-- close col -->
</div><!-- close row -->
</div><!-- close container -->
</section>
css
.front-hero__slider {
position: relative;
z-index: 800;
min-height: 435px;
}
.front-hero__slider .slide-tablet {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.front-hero__slider .slide-tablet .layer-1 {
opacity: 0;
transform: translateY(-4rem) rotateX(-30deg) rotateY(30deg);
transform-origin: center center;
transition: transform 0.7s, opacity 0.7s;
position: relative;
height: 27.1875rem;
overflow-y: hidden;
}
.front-hero__slider .slide-tablet .layer-1 .device-wrapper,
.front-hero__slider .slide-tablet .layer-1 .scroll-wrapper {
position: absolute;
top: 2rem;
overflow: hidden;
left: 50%;
transform: translateX(-50%);
}
.front-hero__slider .slide-tablet .layer-1 .device-wrapper img,
.front-hero__slider .slide-tablet .layer-1 .scroll-wrapper img {
width: 15.625rem;
display: block;
margin: 0 auto;
}
.front-hero__slider .slide-tablet .layer-1 .device-wrapper {
z-index: 1200;
}
.front-hero__slider .slide-tablet .layer-1 .scroll-wrapper {
padding: 0 0.8rem;
top: 1.5rem;
z-index: -1;
height: 23.4375rem;
}
.front-hero__slider .slide-tablet .layer-1 .scroll-wrapper img {
/* width: 10.5625rem; */
height: auto !important;
position: relative;
top: 0.5rem;
}
.front-hero__slider .slide-tablet .layer-1 .scroll-wrapper img.animating {
-webkit-animation: scrollMobile-tablet 6s infinite;
animation: scrollMobile-tablet 6s infinite;
-webkit-animation-timing-function: cubic-bezier(1, 0.005, 0.305, 1);
animation-timing-function: cubic-bezier(1, 0.005, 0.305, 1);
}
.front-hero__slider .slide-tablet .layer-2 {
position: absolute;
left: -14rem;
top: 26rem;
transform: translateY(1rem) scale(0.5);
transition: all 0.5s;
transition-delay: 0s;
opacity: 0;
display: none;
width: 12.5rem;
text-align: right;
}
.front-hero__slider .slide-tablet .layer-2 .name {
color: #ffffff;
padding-top: 0.7rem;
border-top: 1px solid #ffffff;
font-size: 0.75rem;
text-transform: uppercase;
font-weight: 700;
text-align: right;
display: inline-block;
margin-bottom: 0.2rem;
}
.front-hero__slider .slide-tablet .layer-2 .description {
color: #ffffff;
width: 12.5rem;
display: none;
text-align: right;
}
.front-hero__slider .slide-tablet .layer-2 .description:after {
content: "\f061";
font-family: "Font Awesome 5 Pro";
margin-left: 0.25rem;
}
.front-hero__slider .slide.active .layer-1 {
opacity: 1;
transform: translateY(0) rotateX(0) rotateY(0) rotateZ(0);
}
.front-hero__slider .slide.active .layer-2 {
opacity: 1;
transform: translateY(0) rotateX(0) rotateY(0) rotateZ(0);
transition-delay: 0.2s;
}
I’ve searched for some tutorials/demos like this but could not much help… seems like there should be a bunch of examples of stuff like this out there but maybe I’m not searching for the right thing?
