Streaming live at 10am (PST)

Webflow design questions


#1

Enjoying web flow greatly. (soooo much better than webydo.)
A few quick questions:

can I used different image size assets for same image...?

  1. Gallery based site. lots of imagery. heavy pages.
    when I drop to mobile, can I replace images with smaller versions
    (lower k size) to help with load on mobile devices...?

  2. Can I create mini 2 step animations in hover by using two
    different images in one element? (first image in normal state, second image in hover)

  3. Anyone have a workaround if I want to create very minimal parallax effect without adding code snippets.
    even something that is activated on scroll interaction that moves very slowly...

  4. is there any plan to create an animated "page loading" element? right niow, no... correct?

my read only is:
https://preview.webflow.com/preview/scottbarbey7
that's all I got for now. thanks for any help.

Scott B


#2

Hello @scottbarbey.

Lets go step by step with answers smiley

1) From my experience can tell you that using different size of images in the same div is pretty much possible. There is two ways to do that.
- if you use image like a div background you can change background image when you are going to style mobile view.
example:

  • if you use actually image inside the div you can make bigger images display only on descktop (and maybe tablets)
    example:

2) For information about interactions (animation) you always can check page https://interactions.webflow.com.
Here is tutorial about hover animation https://interactions.webflow.com/basic-hover-interaction-video

3) About paralax effect there was couple examples on the forum, but it wasn't easy way to do. But we have very creative community and probably somebody will come with ideas smiley Also you can create separated topic with this question.

4)For create pre-loading elements you can use one of gif images (like here http://preloaders.net) and put it inside the full width div with fixed position and big z-index. To this div apply animation on load and make it wait some time (enough for load all page), then make it fade out and display none.

Hope my explanation was good enough.

Regards,
Anna


#3

This topic was automatically closed after 60 days. New replies are no longer allowed.