Apple TV poster

Developer
Marius Balaj
Size
2,957 Kb
Views
97,152
  1. Apple TV poster Previews
  2. Apple TV poster HTML Codes
  3. Apple TV poster CSS Codes
  4. Apple TV poster JS Codes

How do I make an apple tv poster?

Some random parallax effect. What is a apple tv poster? How do you make a apple tv poster? This script and codes were developed by Marius Balaj on 07 July 2022, Thursday.

Apple TV poster Previews
IQ Test

Apple TV poster - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Apple TV poster</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div data-offset="5" class="poster"> <div class="shine"></div> <div data-offset="-2" class="layer-1"></div> <div class="layer-2"></div> <div data-offset="1" class="layer-3"></div> <div data-offset="3" class="layer-4"></div> <div data-offset="10" class="layer-5"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Apple TV poster - Script Codes CSS Codes

body, html { height: 100%; min-height: 100%;
}
body { background: -webkit-linear-gradient(top, #f6f7fc 0%, #d5e1e8 40%); background: linear-gradient(to bottom, #f6f7fc 0%, #d5e1e8 40%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: perspective(800px); transform: perspective(800px);
}
.btn { text-decoration: none; color: #fff; background: #AEBEC7; font-size: 12px; border-radius: 3px; padding: 10px; text-transform: uppercase; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); position: absolute; left: 50%; top: 75px; -webkit-transform: translateX(-50%); transform: translateX(-50%);
}
.poster { width: 320px; height: 500px; position: absolute; top: 50%; left: 50%; margin: -250px 0 0 -160px; border-radius: 5px; box-shadow: 0 45px 100px rgba(0, 0, 0, 0.4); overflow: hidden;
}
.poster .shine { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: -webkit-linear-gradient(315deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 60%); background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 60%); z-index: 100;
}
.poster div[class*="layer-"] { position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; background-size: 100% auto; background-repeat: no-repeat; background-position: 0 0; -webkit-transition: 0.1s; transition: 0.1s;
}
.poster .layer-1 { background-image: url("http://designmodo.com/demo/apple-tv-parallax/images/1.png");
}
.poster .layer-2 { background-image: url("http://designmodo.com/demo/apple-tv-parallax/images/2.png");
}
.poster .layer-3 { top: 0; bottom: 0; left: 0; right: 0; background-image: url("http://designmodo.com/demo/apple-tv-parallax/images/3.png");
}
.poster .layer-4 { background-image: url("http://designmodo.com/demo/apple-tv-parallax/images/4.png");
}
.poster .layer-5 { background-image: url("http://designmodo.com/demo/apple-tv-parallax/images/5.png");
}

Apple TV poster - Script Codes JS Codes

/** * Designed by @Konstantine Trundayev * https://dribbble.com/k0t * Coded by @Balaj Marius for @Designmodo * http://mariusbalaj.com | http://designmodo.com */
var $poster = $('.poster'), $shine = $('.shine'), $layer = $('div[class*="layer-"]'), w = $(window).width(), //window width h = $(window).height(); //window height
$(window).on('mousemove', function(e) { var offsetX = 0.5 - e.pageX / w, //cursor position X offsetY = 0.5 - e.pageY / h, //cursor position Y dy = e.pageY - h / 2, //@h/2 = center of poster dx = e.pageX - w / 2, //@w/2 = center of poster theta = Math.atan2(dy, dx), //angle between cursor and center of poster in RAD angle = theta * 180 / Math.PI - 90, //convert rad in degrees offsetPoster = $poster.data('offset'), transformPoster = 'translateY(' + -offsetX * offsetPoster + 'px) rotateX(' + (-offsetY * offsetPoster) + 'deg) rotateY(' + (offsetX * (offsetPoster * 2)) + 'deg)'; //poster transform //get angle between 0-360 if (angle < 0) { angle = angle + 360; } //gradient angle and opacity $shine.css('background', 'linear-gradient(' + angle + 'deg, rgba(255,255,255,' + e.pageY / h + ') 0%,rgba(255,255,255,0) 80%)'); //poster transform $poster.css('transform', transformPoster); //parallax foreach layer $layer.each(function() { var $this = $(this), offsetLayer = $this.data('offset') || 0, transformLayer = 'translateX(' + offsetX * offsetLayer + 'px) translateY(' + offsetY * offsetLayer + 'px)'; $this.css('transform', transformLayer); });
});
Apple TV poster - Script Codes
Apple TV poster - Script Codes
Home Page Home
Developer Marius Balaj
Username mariusbalaj
Uploaded July 07, 2022
Rating 4.5
Size 2,957 Kb
Views 97,152
Do you need developer help for Apple TV poster?

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!

Marius Balaj (mariusbalaj) Script Codes
Name
Social buttons with hover
Flat iPhone with Next Post Animation
JCalculator
Flat Turntable Icon and Animation in Pure CSS
Metro UI animations
Angular Particles Explosion
One element Vinyl
Symphony of Math.PI
Folding Effect on Hover
Pythagorean theorem animation
Create amazing blog posts 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!