- This topic is empty.
-
AuthorPosts
-
April 22, 2016 at 2:22 pm #240839deltaParticipant
I have this code pen and im wondering how I could get it to work differently. The code gets a book to open up when you hover over it, I was wondering how could I get the pages to open after clicking on the book. The problem with this is that I have to hold the mouse down to get it to work. I want the code to get the book to open with a single click, could :active, :onclick, and ::after work to get this done? How do I do this. I was wondering if somebody could get it to work that way.
April 22, 2016 at 6:24 pm #240840I.m.learningParticipantYou have yourself quite the code. So many people have helped me along the way and like to make attempts to help others. However, I can only provide sources that will help you out.
A majority of the people here know what they are doing; considering no one has responded yet, let me point you to some ideas. From my research, many use plugins like turn.js or booklet.js
This site looks familiar to your code; however, it used transitions, but seems to be on the right path for your code;
http://www.creativebloq.com/css3/create-page-turn-effect-6126260You can check out this turn.js fiddle
https://jsfiddle.net/hashem/uz3wo7L8/You can download booklet
http://builtbywill.com/code/booklet/See if this one gives you an idea
http://www.sitepoint.com/javascript-sprite-animation-using-jquery/I was going to have an animations page but with as many pages I had, it was easier just to allow my users to download to their computer, open in another page, and open in an iframe.
I’m sure a few of the others on here know how to perform what you’re asking. I am a great researcher, not so good programmer…yet. Sorry I couldn’t help more. I’m still learning myself and know what it’s like not getting help, any help is better than being criticized like other sites.
April 25, 2016 at 7:48 am #240898bearheadParticipantI’d recommend using js for this, you’re already suing jquery, so it’s not very complicated:
http://codepen.io/kvana/pen/NNLNVE
Important to keep in mind that the
.book:hover
selectors (lines 509 to 552 in your css), will have to be changed to a class that gets toggled by javascript – I used.open
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.