- This topic is empty.
November 18, 2018 at 4:08 am #279009
I’m a novice in web design but I can usually achieve what I want using css, html and plugins in WordPress. I want to create a dialogue box that popups when the homepage loads and then hides off to the side after a few seconds. I then want the box to popout again if the user clicks on it. For a visualization, this site does it exactly. https://pupunzi.com
If it’s possible, could someone point me in the right direction on where to start?
Any help would be appreciated.November 18, 2018 at 5:01 am #279010
Is this possible with just css and html
If you’re asking how the linked site does it, you can check via the developer toolbar – that’s F12 in most browsers. Use it to inspect their pop up element and see what styles and CSS animations are applied via the stylesheets pane.
If you’re asking how to do it yourself from scratch, start researching “keyframe animations in css”. You’ll most likely be using variations of the
transformproperty, so if you aren’t already familiar with it, have a look into that too.
You could also look into existing animation libraries for code inspiration (although you’ll likely find tutorials while you research more about keyframes) “animate.css” is a good one.
If you want specific help though, try mocking up a simple demo in CodePen showing your own code. Also clearly explain what is and isn’t working as expected. From there we’ll be better placed to offer suggestions and fixes.November 18, 2018 at 7:51 am #279015WayneKenneyParticipant
Here’s a solution: If the popup is a div layered on top then you can use Animate.CSS with a JQuery delay.
Animate.CSS : https://daneden.github.io/animate.css/
Can do it like this: https://codepen.io/anon/pen/JerdbQ
Edit: Woops. Didn’t read the whole question. You may need to use a JQuery hover event to bring it back.November 18, 2018 at 8:01 am #279016
Here’s a lightweight pop up example using no libraries in case it helps. The demo uses images but it can easily be adapted for text http://fofwebdesign.co.uk/template/_testing/modal-popup-effects.htmNovember 19, 2018 at 4:14 am #279068
Ok great. Thanks for all of your responses and I’ll check back in if I’m successful. I’ll probably try to achieve the original animation and hover pop out before moving on to trying to bring it back when the user clicks on it.November 19, 2018 at 6:30 am #279070
For fun, I converted my previous image modal popup to a text version http://fofwebdesign.co.uk/template/_testing/modal-popup-effects-text.htm
Good luck with your project.November 21, 2018 at 1:06 pm #279337
So I’m back and I’ve had some success thanks to the links you posted. I surprised myself with how much I was able to deconstruct the code of those examples. I was finally able to get the picture to zoom in and I was also able to get it to slide to the left and after some work I managed to make them execute one after the other. It works fine in fiddle but when I try to paste it into my wordpress template it doesn’t work.
I’ve posted a fiddle (please excuse any formatting issues. I’m learning the rules as I go along and study more code) in case I missed something that might possibly be conflicting with the animation. https://jsfiddle.net/darkwriterxx94/xjs8m4p2/November 21, 2018 at 6:04 pm #279354
Sorry, but I figured it out. I had to replace the $ with jQuery and it worked. Thanks for all your help.November 25, 2018 at 8:32 pm #279517
Sorry to reopen this thread if it’s been closed. I’ve managed to do the popup and get it to work in wordpress. However, is it possible to delay the animations so that the hover happens after the zoom has completed? While the zoom is happening, if I hover over the popup it does the second animation (slide out left). I’d post the code into fiddle, however, this confict doesn’t happen there. Only in my website.
- The forum ‘Design’ is closed to new topics and replies.