Streaming live at 10am (PST)

I need to recreate this page with my own images


#1

I need to recreate this page with my own images. http://berkeleypr.co.uk/stories/

I'm having trouble getting the images to stick to the edges of the page. I can screen shot and resize the images but the edit bar appears and doesn't give me the view of the whole page. I hope this makes sense.

I just need to add images so they fit perfectly. Can anyone help?

Public link: https://webflow.com/design/prestige-events?preview=48fd40a2fe6fbbaa1110ae0112aeb1f5

Use the Prestige Events Magazine page to start.

Thanks

Sam


#2

I'd suggest using webflow columns and have a fixed height for them. Then simply use css background as an image. The scale of the image in background can be changed using background-size: 110%; css feature. Simply add it in custom code for hovered image or use a javascript:

$('.imagethatscales').hover(function() {
	$(this).animate({
		'background-size', '110%'
	});
}, function() {
	$(this).animate({
		'background-size', '100%'
	});
});

I haven't tested this code, so ping me if it doesn't work as you wish.


#3

Working on that now. Thanks for the reply.


#4

How do I link the background of a column?


#5

It will nice Bartosz if we can achieve zoom animation without page load like this: http://www.andy-wolf.at/awe/#/
We can natively create zoom animation on hover in webflow, but not page load.


#6

Sounds like you are pretty new to webflow. I recommend watching all the tutorial videos from the link in the upper right of the forums. Good luck


#7

It will be nice you point me to what am missing. WF doesn't allow animation of background image on page load like a zoom as in the reference. WF can do hover zoom animation, that is not what am looking for.


#8

I've put this on my list for video tutorial series I'm making. Keep an eye on forum, or subscribe to our list: http://laitart.pro to get instant info regarding our website and the course I'm making.


Here is the solution to your problems:

http://bklearn.webflow.com/zoom-animation

<style>
    @-webkit-keyframes zoomanimation {
        0% {
            background-size: 100%;
        }
        50% {
            background-size: 150%;
        }
        100% {
            background-size: 100%;
        }
    }
    @-moz-keyframes zoomanimation {
        0% {
            background-size: 100%;
        }
        50% {
            background-size: 150%;
        }
        100% {
            background-size: 100%;
        }
    }
    @-ms-keyframes zoomanimation {
        0% {
            background-size: 100%;
        }
        50% {
            background-size: 150%;
        }
        100% {
            background-size: 100%;
        }
    }
    @keyframes zoomanimation {
        0% {
            background-size: 100%;
        }
        50% {
            background-size: 150%;
        }
        100% {
            background-size: 100%;
        }
    }

    .zoom-section {
        -webkit-animation: zoomanimation 30s ease-in-out infinite;
        -moz-animation: zoomanimation 30s ease-in-out infinite;
        -ms-animation: zoomanimation 30s ease-in-out infinite;
        animation:  zoomanimation 30s ease-in-out infinite;
    }
</style>

#9

Much much appreciation, Bartosz. Only if WF can start adding animation to the next round of features.


Background position transition - how its work?
#10

Most animations are available via Interactions. More advanced require scripting. It's easy to follow, trust me :) I've learned most of javascript and css tricks thanks to challenges here on forum. One thing: every script I create starts from a piece of paper and pencil. Every.

As I said - I'll try to cover CSS Animations topic on my course.


#11