Introductory Captions from Star Wars on JS + CSS3
Hello Habrahabr.
Inspired by the recently completed “Learn Jquery in 30 days” course and the article about image generation as a matrix code, I decided to pump my js to a level just above the plinth, try to make an invite and do something interesting, something that can be shown without burning from the desire to fail under the ground, such a sophisticated community as Habr.
So, the opening credits of my Star Wars series were chosen as experimental subjects. In the process of walking on the Internet, in search of someone else's work, nothing was first found. Well and good, but the idea would have ended even before it began.
Jquery (which is not surprising, due to the prerequisites for this whole idea) and transform3d CSS3 properties were chosen for creating animation. They were chosen in spite of a long, ineffectual beating with a brow into the Google search bar in search of crutches for cross-browser compatibility. Achieving identical work in different browsers, even within the same engine (webkit) and failed. Chrome flatly refuses to show captions at the bottom of the screen, and they magically appear only in the middle of the animation, while Safari regularly shows everything. Firefox slows down noticeably, but the animation also displays correctly.
')
I will make a reservation right away, neither the time nor the desire to adjust to different permits I had. Therefore, everything was calculated under my work monitor 1600x900. If something somewhere does not jump out there, do not judge.
Let's start with html markup
Nothing special…
Js
All JS is a regular set of timers, seasoned with the most banal jquery methods. As I said before, I just entered the bright way of knowing JS, so please do not kick it.
Since naked JQuery does not know how to work with the scale property, for the animation of reducing the picture, the JQuery UI was connected, which allows you to use scale in effects.
CSS
Here only a small part is interesting.
Values of the (-prefix-) transform property were found using the method of scientific analysis.
rotateX indicates the tilt of the element relative to the X axis (more simply, relative to the horizontal plane of the monitor), translateY determines the offset along the Y axis, translateZ, as you might guess, determines the offset relative to the Z axis.
The perspective determines the depth of the perspective, perpective-origin indicates the position of the observer relative to our text. These properties are specified for the parent element of the nodes we work with.
Working example *
* Chrome flatly refuses to show captions at the bottom edge of the screen, and they magically appear only in the middle of the animation, while Safari regularly shows everything. Firefox slows down noticeably, but the animation also displays correctly.
In the process of googling materials, I came across the implementation of titles on pure css without js. Here
I really want to hear advice on the harmonization of this whole economy, improving the code, useful crutches and other things.
PS Separately, I want to write about the work of Safari with the audio element. I, frankly, hung up for a while, watching in the console:
"TypeError: 'undefined' is not a function (evaluating 'document.getElementsTagName (' audio ')')".
After wandering between the audio element specification and google, I found out that Safari does not support audio without QuickTime installed in the system. Here you have a standalone application.
Inspired by the recently completed “Learn Jquery in 30 days” course and the article about image generation as a matrix code, I decided to pump my js to a level just above the plinth, try to make an invite and do something interesting, something that can be shown without burning from the desire to fail under the ground, such a sophisticated community as Habr.
So, the opening credits of my Star Wars series were chosen as experimental subjects. In the process of walking on the Internet, in search of someone else's work, nothing was first found. Well and good, but the idea would have ended even before it began.
Jquery (which is not surprising, due to the prerequisites for this whole idea) and transform3d CSS3 properties were chosen for creating animation. They were chosen in spite of a long, ineffectual beating with a brow into the Google search bar in search of crutches for cross-browser compatibility. Achieving identical work in different browsers, even within the same engine (webkit) and failed. Chrome flatly refuses to show captions at the bottom of the screen, and they magically appear only in the middle of the animation, while Safari regularly shows everything. Firefox slows down noticeably, but the animation also displays correctly.
')
I will make a reservation right away, neither the time nor the desire to adjust to different permits I had. Therefore, everything was calculated under my work monitor 1600x900. If something somewhere does not jump out there, do not judge.
Let's start with html markup
<!DOCTYPE html> <html> <head> <title>Star Wars Opening Crawl</title> <link rel="stylesheet" href="style.css" type="text/css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> <script type="text/javascript"> JS… </script> </head> <body> <h3 id="intro">A long time ago, in a galaxy far,<br /> far away...</h3> <audio id="music" preload="auto" autobuffer controls> <source src="http://dl.dropbox.com/u/16979719/sw_music.ogg"> </audio> <img src="starwars-logo.png" width="100%"/> <div id="crawl"> <div id="text"> … </div> </div> <div id="theend">THE END</div> <div id="bg"></div> // , </body> </html> Nothing special…
Js
function startIntro(){ $('#intro').fadeOut(1000); setTimeout(function (){ $('body').css('background', 'url(background.png)') // var music = document.getElementById('music') if(music.canPlayType) // audio. Safari JS music.play() $('#logodiv').fadeIn(500); setTimeout(startCrawl, 1000); }, 1500) } function startCrawl(){ $('#logodiv').hide("scale",{}, 15000); // JQuery UI setTimeout(function(){ $('#text').show() var now = 800; var translateY = setInterval( function(){ // animation, transform . if($.browser.mozilla) var prefix = '-moz-' else var prefix = '-webkit-' $('#text').css( prefix + 'transform','rotateX(55deg) translateY('+now+'px) translateZ(300px)'); now = now - 2; if(now == -1800){ // , clearInterval(translateY); $('#text').fadeOut(2000) $('#theend').delay(2000).fadeIn(2000); } }, 50); }, 9000) } $(function(){ setTimeout(function(){ $('#intro').fadeIn(1000); // Long time ago... }, 500) setTimeout(startIntro, 6000); }) All JS is a regular set of timers, seasoned with the most banal jquery methods. As I said before, I just entered the bright way of knowing JS, so please do not kick it.
Since naked JQuery does not know how to work with the scale property, for the animation of reducing the picture, the JQuery UI was connected, which allows you to use scale in effects.
CSS
Here only a small part is interesting.
#crawl { width: 1000px; margin: auto; -webkit-perspective: 800px; -webkit-perspective-origin: center 350px; -moz-perspective: 800px; -moz-perspective-origin: center 350px; } #text { display: none; margin: auto; width: 600px; text-align: justify; -webkit-transform: rotateX(55deg) translateY(800px) translateZ(300px); -webkit-backface-visibility: visible; -moz-transform: rotateX(55deg) translateY(800px) translateZ(300px); -moz-backface-visibility: visible; } Values of the (-prefix-) transform property were found using the method of scientific analysis.
rotateX indicates the tilt of the element relative to the X axis (more simply, relative to the horizontal plane of the monitor), translateY determines the offset along the Y axis, translateZ, as you might guess, determines the offset relative to the Z axis.
The perspective determines the depth of the perspective, perpective-origin indicates the position of the observer relative to our text. These properties are specified for the parent element of the nodes we work with.
Working example *
* Chrome flatly refuses to show captions at the bottom edge of the screen, and they magically appear only in the middle of the animation, while Safari regularly shows everything. Firefox slows down noticeably, but the animation also displays correctly.
In the process of googling materials, I came across the implementation of titles on pure css without js. Here
I really want to hear advice on the harmonization of this whole economy, improving the code, useful crutches and other things.
PS Separately, I want to write about the work of Safari with the audio element. I, frankly, hung up for a while, watching in the console:
"TypeError: 'undefined' is not a function (evaluating 'document.getElementsTagName (' audio ')')".
After wandering between the audio element specification and google, I found out that Safari does not support audio without QuickTime installed in the system. Here you have a standalone application.
Source: https://habr.com/ru/post/139962/
All Articles