Home > Developer > Web Develop

Standing on the shoulders of giants-making cool web slideshows

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

    • Online Demo 1
    • Local Downloads

Are you still using PPT to make some meaningless slides? Do you want to do the work of the PPT to attract everyone? Do you want to attract leadership attention through a PPT? All right! Learn how to make a cool web slideshow ~

PS: If you see this is not interesting, please take a look at the material demonstration, this demo is the first time for the group to introduce the new HTML5 when you do a slide!

Tools
    1. A recent version of the Chrome browser (Firefox, Safari also available)
    2. A handy IDE tool
    3. Impress.js (You can also download the material on this page to make changes to your own needs)
Advantages

Almost no need to write any JS, just need to add a few properties on each sub-page DOM to achieve the effect! As for CSS, according to your slideshow needs, read the situation to write!

You can control slide transitions with keyboard spaces, cursors, or the mouse wheel during operation

Principle

See the effect of most people should understand the principle, here or wordy: In fact, each sub-page is an ID impress div under the first level div,impress will they each start position or animation angle set (by us to match), When a child page appears, it passes through a smooth CSS animation over to the front of the screen. It's like a large piece of paper on a few div, the screen is like a magnifying glass focus, starting from the first Div, looking at the Div, in the process of constantly panning or rotating this large paper (3d effect animation).

HTML part structure
  2. <body>
  4. ....
  6. <div id="Impress">
  8. <div class="Step"> Sub-page one </div>
  10. <div class="Step"> Sub-page two </div>
  12. <div class="Step"> Sub-page Three </div>
  14. <div class="Step"> Sub-page four </div>
  16. ....
  18. </div>
  20. ....
  22. </body>

JS Code section

In addition to the introduction of Impress.js is the following sentence:

    1. <script> Impress(). Init(); </script>
Api
    • Data-x: The x-coordinate of the slide (panning when the sub-page appears)
    • Data-y: The y-coordinate of the slide (panning when the sub-page appears)
    • Data-z: z-coordinate of the slide (translation of z-axis depth when the child page appears)
    • Data-scale: Zoom. Zooms by specifying a value to zoom in when the child page appears, while the other child pages are relatively small
    • Data-rotate: Rotate. Make sure to rotate your slide by a number of degrees
    • Data-rotate-x: For 3D, the number of degrees is how much it should rotate relative to the x-axis. (Tilt forward/back)
    • Data-rotate-y: For 3D, the number of degrees is how much it should rotate relative to the Y axis. (Left pendulum/Right pendulum)
    • Data-rotate-z: For 3D, the number of degrees is how much it should rotate relative to the z axis.

All of these parameters are configured on the DOM of each sub-page div

DEMO
  2. ......
  4. ............
  6. <div ID="title" class="Step" data-x="0" data- Y="0" data-scale="4">
  8. <span class="Try"> go to the Chase </span>
  12. HTML <sup>5</sup></H1>
  14. <span class="footnote"><sup>*</sup> World Wide Web Consortium </span>
  16. </div>
  18. <div id= "Yuyi" class= "Step Item" data-x= "850" data-y= "3" data-rotate= "data-scale=" >
  20. h3>
  22. <img src="img/yy.png" width="100%">
  26. <p class="Font6">HTML5 introduces new HTML elements that enable developers to describe the structure of the document in more detail, using these elements. Make the document easier to read, search engines can better understand the relationship between the parts of the page, we can also search for faster, more accurate information.
  28. </p>
  30. </div>
  32. ............
  34. ......

This is a slide in the clip, the source code to intercept two sub-pages, from here can read 3 points:

    1. Each sub-page is a DIV and must have a step as the class, and if not, the DIV will not appear on the slide
    2. Attributes in the API are written in a sub-page div
    3. Custom CSS for each child page can be defined as class or ID written in CSS file

Here, the smart reader should have been eager to rely on their own wisdom to be able to do one's own hands. But at this time I will say a few words of my source code:

      1. <div class= "step slide" data-x= " -1000" data-y= " -1500" >
      2. src< Span class= "pun" >= "img/h5.png" >
      3. &NBSP;
      4. HTML5 introduction </H1>
        5. Li class= "L4" > </DIV>

    First child page here data-x,data-y can start from 0, the reason is actually want to tell you here can not start from 0, haha! You can put this seed page positioned before the 0 sub-page as a slide preface

    1. <div id= "overview" class= "step" data-x= "3000" Span class= "PLN" > data-y= "" data-scale=>
    2. </DIV>

      The last sub-page of the source code has an empty div, in fact, in order to show the "whole piece of paper" panorama, coordinates are self-groping out, magnification is also based on the content of the roughly tried out. This div actually defines the style:display:none, but the slideshow will still show, just a blank. In other words, even if he set the CSS to let him hide, but as long as the step of the class, the same will not be ignored!

Click here to debug and play related codes online

Original link: http://www.gbtags.com/gb/share/5688.htm

Standing on the shoulders of giants-making cool web slideshows

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
kitten standing cool apps to download on android best projector for slideshows web making tutorial standing wooden numbers get the permalink wordpress the field

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More