javascript - CSS 页面转换

标签 javascript jquery html css

我想知道如何处理页面转换，因为我对它们很陌生。

我想从这些中添加随机过渡，在 codrops 的这个演示中使用:https://tympanus.net/codrops/2013/05/07/a-collection-of-page-transitions/

问题是，我在 youtube 上观看的教程都只使用一个 .html 文件。我的结构有些不同，有多个 .html 文件(联系人、图库)等和一个 css 样式

这是我的 html 文件。我尝试按照 codrops 上的步骤进行操作，但最终出现了白屏。任何人都有这方面的经验吗？

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
      <link rel="stylesheet" type="text/css" href="Style.css"/>
      <title>Untitled Document</title>
   </head>
   <body>
      <div id="mySidenav" class="sidenav">
         <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
         <a href="Index.html">Domov</a>
         <a href="Gallery.html">Galéria</a>
         <a href="Contact.html">Kontakt</a>
         <a href="Aboutme.html">O mne</a>
      </div>
      <script>
         /* Set the width of the side navigation to 250px */
         function openNav() {
            document.getElementById("mySidenav").style.width = "250px";
         }

         /* Set the width of the side navigation to 0 */
         function closeNav() {
            document.getElementById("mySidenav").style.width = "0";
         }


      </script>
      <div id="first">
         <ul>
            <li><a href="#" id="up" onClick="openNav()" >Menu</a></li>
         </ul>
         <div id="block">
            <h2>Filip Ducký</h2>
            <p id="desc">Portfoilo</p>
            <br><br><br><br><br><br><br>
            <a href="#" class="tlacitko">Moje Práce</a>
         </div>
      </div>
      <div id="second">
         <section>
            <img src="Img/Info.png" class="info" alt="">
            <h3>Grafik</h3>
            <p class="info2">Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu. Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom ako Aldus PageMaker, ktorý obsahoval verzie Lorem Ipsum.</p>
         </section>
         <section>
            <img src="Img/Info.png" class="info" alt="">
            <h3>Webové stránky</h3>
            <p class="info2">Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu. Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom ako Aldus PageMaker, ktorý obsahoval verzie Lorem Ipsum.</p>
         </section>
         <section>
            <img src="Img/Info.png" class="info" alt="">
            <h3>3D</h3>
            <p class="info2">Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu. Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom ako Aldus PageMaker, ktorý obsahoval verzie Lorem Ipsum.</p>
         </section>
      </div>
      <div id="third">
         <div class="am1">
            <img src="Img/Info_dark.png" class="am2" alt="">
            <h3 id="omne">O mne</h3>
            <p class="am3">Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu. Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom ako Aldus PageMaker, ktorý obsahoval verzie Lorem Ipsum.</p>
         </div>
         <br><br><br>
         <a href="#" class="tlacitko2">Kontakt</a>
         <br><br><br><br>
      </div>
      <footer>
         <div id="left">
            <p id="fot"> © 2017</p>
         </div>
         <div id="right"><a href="#up"><img id="arrow" src="Img/arrow.png" alt=""></a></div>
      </footer>
   </body>
</html>

我想在页面之间进行转换。主页 - 画廊、画廊 - 联系方式等。如果帖子中的内容不清楚，我深表歉意。

最佳答案

尝试以下 CSS:

#mySidenav{
    transition: all 500ms;
}

这是 transition 的快速格式

transition: <Properties to apply on> <duration>;

duration可以在ms或在 s

检查以下代码段:

#mySidenav {
  position: absolute;
  width: 0;
  left: 0;
  height: 100%;
  background: white;
  overflow: hidden;
  transition: all 500ms;
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" type="text/css" href="Style.css" />
  <title>Untitled Document</title>
</head>

<body>
  <div id="mySidenav" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <a href="Index.html">Domov</a>
    <a href="Gallery.html">Galéria</a>
    <a href="Contact.html">Kontakt</a>
    <a href="Aboutme.html">O mne</a>
  </div>
  <script>
    /* Set the width of the side navigation to 250px */
    function openNav() {
      document.getElementById("mySidenav").style.width = "250px";
    }

    /* Set the width of the side navigation to 0 */
    function closeNav() {
      document.getElementById("mySidenav").style.width = "0";
    }
  </script>
  <div id="first">
    <ul>
      <li><a href="#" id="up" onClick="openNav()">Menu</a></li>
    </ul>
    <div id="block">
      <h2>Filip Ducký</h2>
      <p id="desc">Portfoilo</p>
      <br><br><br><br><br><br><br>
      <a href="#" class="tlacitko">Moje Práce</a>
    </div>
  </div>
  <div id="second">
    <section>
      <img src="Img/Info.png" class="info" alt="">
      <h3>Grafik</h3>
      <p class="info2">Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu.
        Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom
        ako Aldus PageMaker, ktorý obsahoval verzie Lorem Ipsum.</p>
    </section>
    <section>
      <img src="Img/Info.png" class="info" alt="">
      <h3>Webové stránky</h3>
      <p class="info2">Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu.
        Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom
        ako Aldus PageMaker, ktorý obsahoval verzie Lorem Ipsum.</p>
    </section>
    <section>
      <img src="Img/Info.png" class="info" alt="">
      <h3>3D</h3>
      <p class="info2">Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu.
        Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom
        ako Aldus PageMaker, ktorý obsahoval verzie Lorem Ipsum.</p>
    </section>
  </div>
  <div id="third">
    <div class="am1">
      <img src="Img/Info_dark.png" class="am2" alt="">
      <h3 id="omne">O mne</h3>
      <p class="am3">Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu.
        Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom
        ako Aldus PageMaker, ktorý obsahoval verzie Lorem Ipsum.</p>
    </div>
    <br><br><br>
    <a href="#" class="tlacitko2">Kontakt</a>
    <br><br><br><br>
  </div>
  <footer>
    <div id="left">
      <p id="fot"> © 2017</p>
    </div>
    <div id="right">
      <a href="#up"><img id="arrow" src="Img/arrow.png" alt=""></a>
    </div>
  </footer>
</body>

</html>

关于javascript - CSS 页面转换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42577896/

上一篇：html - 垂直 jQuery 标签，文本包裹在比标签宽度长的标签中

下一篇：html - 我在 CSS 中只有一个类语句有效

相关文章：

javascript - 即使使用preserveAspectRatio后，D3直方图也没有响应

javascript - 有什么方法可以检查变量是否是真正的 jqXHR？

具有默认非必需值的 Javascript 函数

javascript - 在已经隐藏的 div 上切换隐藏？

javascript - 最后一个下拉菜单无法根据前一个下拉菜单工作

jquery - 如何将 DOM 附加到 Angular 2 组件并仍然获得封装样式

html - 如何在 Chrome 中禁用谷歌从 HTML 翻译

javascript - 在 return 语句中访问 JS 函数

javascript - 使用分组将 Html 表格转换为段落

html - Datatable JSF 中展开折叠表行

©2024 IT工具网  联系我们