Making CSS3 Effects happen either "Again", or just once and stay

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Post Reply
User avatar
etcbbu
 
 
Posts: 596
Joined: Mon Apr 23, 2007 3:00 pm

Making CSS3 Effects happen either "Again", or just once and stay

Post by etcbbu » Mon May 10, 2021 4:16 pm

Hi all. While I fixed the one issue about text "flying in", I've now got a question on the same website, using the same type of "Effects" (but this time, on an image) :

Please look at these two pages:

1) https://www.makemytechxit.com/index.php
2) https://www.makemytechxit.com/what-is-techxit.php

Essentially, I've got that big logo that is at the top-middle of these pages. On that image, I have the CSS3 effect "Transform Bounce In Down" applied on it.

Whats wrong is that I am noticing that sometimes when you scroll down on a page, and then scroll back up, the logo never shows up again. Sometimes when you scroll down some, bu then scroll back up, the logo *DOES* bounce back in again, which is awesome. I'd like it to do that every time. But here are the two settings I've got placed on the image:

https://makemytechxit.com/scrn5921.png

What am I doing wrong?

--etcbbu
https://www.ktravisj.com

Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization

https://www.ktravisj.com

User avatar
crispy68
 
 
Posts: 1515
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Making CSS3 Effects happen either "Again", or just once and stay

Post by crispy68 » Mon May 10, 2021 4:31 pm

It appears you have the animations applied to the logo itself. I have found this to be less effective and similar things have happened to me. I would suggest trying to add the triggers (events) to another object/layer or bookmark on the page to trigger when it shows and hides. I've had better luck doing it this way.

User avatar
etcbbu
 
 
Posts: 596
Joined: Mon Apr 23, 2007 3:00 pm

Re: Making CSS3 Effects happen either "Again", or just once and stay

Post by etcbbu » Mon May 10, 2021 5:05 pm

Ok, so I took off those two Events that I showed in the screenshot that are on the Image/Logo itself. And then I put the exact two over on the "Layer" on which that Image/Logo is a child.

And that after publishing my project, loading my page, and trying it out now, I want to say that it seems like there is *somewhat* of an improvement. Like, still, seems like sometimes it does it right, and sometimes it just stays off=screen whenever I scroll back up to the top. I am replicating my original problem, in that it seems to "Sometimes" bounce down again, whenever I scroll down off the Layer, and scroll back up. And then some other times, it does *not* bounce-down again, It just stays off-screen.

Any ideas? I know this is splitting hairs, but can perhaps changing the "Target" off of " (self) " and choosing the object by NAME instead of just by (self) (in the "Events" tab) make this work any better..?
https://www.ktravisj.com

Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization

https://www.ktravisj.com

User avatar
etcbbu
 
 
Posts: 596
Joined: Mon Apr 23, 2007 3:00 pm

Re: Making CSS3 Effects happen either "Again", or just once and stay

Post by etcbbu » Tue May 11, 2021 4:08 pm

Just seeing if anyone has any other ideas about workarounds for this?
https://www.ktravisj.com

Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization

https://www.ktravisj.com

User avatar
crispy68
 
 
Posts: 1515
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Making CSS3 Effects happen either "Again", or just once and stay

Post by crispy68 » Tue May 11, 2021 4:10 pm

Is it possible for you to save the project with just this page with the animated logo and supply a demo? Sometimes it is hard to say how to fix it without seeing your setup which includes what objects are being use to trigger the effects.

User avatar
etcbbu
 
 
Posts: 596
Joined: Mon Apr 23, 2007 3:00 pm

Re: Making CSS3 Effects happen either "Again", or just once and stay

Post by etcbbu » Tue May 11, 2021 8:55 pm

@crispy68 thanks a lot, man. Here's the link; would you mind posting here right when you finish downloading it so I can take-down this link:

[Edit: Link removed.]

Please note, I went against your advice and left four pages. But let me explain:

- two are masterpages that are unpublished (the top-logo at the top of those pages are easy to determine as the thing about which I am talking needing to code differently such that it bounces-down into the page like I need)

- two are *actual* live-pages: index.php utilizes masterpage (unpublished) as its Master Frame; and what-is-techxit.php utilizes secondmp (unpublished) as its Master Frame
Last edited by etcbbu on Tue May 11, 2021 10:49 pm, edited 1 time in total.
https://www.ktravisj.com

Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization

https://www.ktravisj.com


User avatar
etcbbu
 
 
Posts: 596
Joined: Mon Apr 23, 2007 3:00 pm

Re: Making CSS3 Effects happen either "Again", or just once and stay

Post by etcbbu » Tue May 11, 2021 10:49 pm

Thank you for taking a look.
https://www.ktravisj.com

Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization

https://www.ktravisj.com

User avatar
crispy68
 
 
Posts: 1515
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Making CSS3 Effects happen either "Again", or just once and stay

Post by crispy68 » Tue May 11, 2021 11:30 pm

Hey etcbbu,

I think the best way is to change the event from hiding and showing the layer to just hiding and showing the image: makemytechxitmasterpageImage1

So basically leave everything as is and just change the target to the image itself. In a nutshell, when the layer becomes completely hidden, the event fires and it hides the logo. When then layer is partially revealed, it triggers the event to show the logo slide in. Make sense?

I would also consider adding a 500ms delay to the onscrollrevealpartial so that when you scroll up there is a slight delay before the logo slides again to assure you actually seeing it sliding in.

User avatar
etcbbu
 
 
Posts: 596
Joined: Mon Apr 23, 2007 3:00 pm

Re: Making CSS3 Effects happen either "Again", or just once and stay

Post by etcbbu » Thu May 13, 2021 8:24 pm

crispy,

Thanks for the advice! Could folks visit these two pages:

- https://www.makemytechxit.com/index.php
- https://www.makemytechxit.com/what-is-techxit.php

And let me know if all three of these things are true:

1) the top logo seems to bounce down in when you load the page,

2) whenever you scroll down to the very bottom of the page and then scroll all the way back up to the top, the logos bounces down in again

3) whenever you scroll down a little bit into the page (not all the way to the bottom though) and then scroll all the way back up to the top, the logos bounces down in again

If those are all true 100% for both of the two pages I mentioned above, I'm good-to-go~ Otherwise, I gotta try something else. It looks to me like it's working out; but I'd feel better if some of y'all's eyeballs could take a look, test, and let me know, too~

--etcbbu
https://www.ktravisj.com

Travis J Consulting, LLC -
Website Design/Development/Maintenance, Web-Marketing/Social Media/Social Networking, SEO/Search Engine Optimization

https://www.ktravisj.com

Post Reply