当前位置: 动力学知识库 > 问答 > 编程问答 >

html - How to set each type of page transition to a specific page? (css animations)

问题描述:

So I have 4 different room transitions (up, down, left & right). I want to be able to set each transition to go to a specific page, and repeat if the same transition is clicked again.

For example, have "left" (data-animation 55) goto "Page1.html", and if I was already on "Page1.html", then it would just transition right back into the page. And I would have the "right" button, go to "Page2.html", etc.

https://github.com/cweigen/page_transition_room

There's the github repo, but this is the code that I've been messing with, experimenting with different versions of it to attempt going to a specific page and repeating if the same button is clicked, but go to another specific page is another menu button is clicked.

 <div class="pt-triggers">

<div id="dl-menu" >

<ul class="dl-menu">

<li data-animation="54"><a href="#" > right </a></li>

<div class="pt-triggers1">

<li data-animation="55"><a href="#" > left</a></li>

<div class="pt-triggers2">

<li data-animation="56"><a href="#" > down</a></li>

<div class="pt-triggers3">

<li data-animation="57"><a href="#" > up</a></li></div>

</ul>

</div>

</div>

 <div id="pt-main" class="pt-perspective">

<div class="pt-page pt-page-1"><iframe src="http://visiondigit.al/VisionDigital_Launch/" width="100%" height="100%"> </iframe></div>

<div class="pt-page pt-page-2"><iframe src="http://scsuchat.com" width="100%" height="100%"> </iframe></div>

</div>

网友答案:

You can't expect others to download the repo and build it for you. Time matters! That's the first thing you need to learn how to ask a question properly on StackOverflow.

As you are a new user, I'm going to make one-off excuse for you.

The library you are using is not the best choice for your task. However, it does provide as many as 67 different transition effects, which are defined in **pagetransions.js** and called using data-animation attribute. Have a look at the js file and you can choose the specific animation you are looking for.

To solve your other problem, you'll have to write a bit of your own code as the author doesn't provide a function to link each button with specific page, nor hiding the button when you are already on that page. You can use jQuery to do so.

But like I said, this is not the best nor the only option you have. Check

THIS DEMO

I have created a structure that mostly mimics your requirements. Have a play and try to understand the demo. The structure is quite simple. It uses two external resources which you can see and download from the fiddle.

分享给朋友:
您可能感兴趣的文章:
随机阅读: