Hi guys!
I'm trying to figure out how to have an image "fade-in" when the website loads. I was hoping it would be as simple as assigning it the foundation class "Fade-In" but it still has no animation.
Any suggestions on how to accomplish this?
Thank you!
Laura
Laura K
Registered User
38 posts
Wayan Jaya
Registered User
4,798 posts
Online Now
Laura K wrote:
Hi guys!
I'm trying to figure out how to have an image "fade-in" when the website loads. I was hoping it would be as simple as assigning it the foundation class "Fade-In" but it still has no animation.
Any suggestions on how to accomplish this?
Thank you!
Laura
Hi guys!
I'm trying to figure out how to have an image "fade-in" when the website loads. I was hoping it would be as simple as assigning it the foundation class "Fade-In" but it still has no animation.
Any suggestions on how to accomplish this?
Thank you!
Laura
You change the image view from
regular
to
out of view
then the opacity to 0.
Then change back to regular and apply transitions as you prefer
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
Laura K
Registered User
38 posts
Awesome! I will give it a go. Thank you very much! 
Laura K
Registered User
38 posts
Worked perfectly. Thanks again!!!
Bosco
Registered User
222 posts
Wayan,
I need help with your instructions. Can you explain where those settings are?
Thanks in advance.
I need help with your instructions. Can you explain where those settings are?
Thanks in advance.
Learn something, Share something.
Inger
Senior Advisor
14,450 posts
Online Now
The 'out-of-view' is to be found where it says 'In state' on the style pane.
You can see the use of it in my sharing folder, for Bootstrap users: https://eikweb.com/sharing/image-change/index.html
For Foundation users: https://eikweb.com/sharing/four-up/index.html
Sharing folder URL, see signature.
You can see the use of it in my sharing folder, for Bootstrap users: https://eikweb.com/sharing/image-change/index.html
For Foundation users: https://eikweb.com/sharing/four-up/index.html
Sharing folder URL, see signature.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Wayan Jaya
Registered User
4,798 posts
Online Now
Bosco wrote:
Wayan,
I need help with your instructions. Can you explain where those settings are?
Thanks in advance.
Wayan,
I need help with your instructions. Can you explain where those settings are?
Thanks in advance.
As Inger says in that thingy on the right
look for the section "In State"
select "Out Of View" from the dropdown
In the Design View tab, move on down to the section "Opacity Shadow"
set opacity to 0 go back to "In State" re-set that back to "regular"
slide on over to the tab "Effects"
open the transitions default (all properties) set the transitions as you want (you can set the thing to "opacity if you want rather than all properties by choosin it from the dropdown too.
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
Wayan Jaya
Registered User
4,798 posts
Online Now
Laura K wrote:
Worked perfectly. Thanks again!!!
Worked perfectly. Thanks again!!!
Welcome
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
Laura K
Registered User
38 posts
Well shoot. I just noticed that it works on my desktop when I have it minimized to my mobile size, but on my actual phone, it doesn't fade in. Anything special I need to do for that? I will mess around with it and see if I can get it to work!
Wayan Jaya
Registered User
4,798 posts
Online Now
Laura K wrote:
Well shoot. I just noticed that it works on my desktop when I have it minimized to my mobile size, but on my actual phone, it doesn't fade in. Anything special I need to do for that? I will mess around with it and see if I can get it to work!
Well shoot. I just noticed that it works on my desktop when I have it minimized to my mobile size, but on my actual phone, it doesn't fade in. Anything special I need to do for that? I will mess around with it and see if I can get it to work!
Did you do it at all breakpoints sorry to sound like stating the obvious but just checking don't want others accuse me of something I'm not
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
