Amandafashions.co.uk

A hectic week has seen a complete site designed, built and go live in less than four days.

And that includes a fashion show photo shoot, editing down from 400 photos, optimising around 200 and creating a page for each outfit.
This is phase one, of two or three major planned phases. In the fullness of time I will add Social Media integration and a full stock listing, plus CMS for the client to add their own content.
I know that the Fashion show pages would be better driven by XML but didn’t have the time to set it up, so did each page manually in Coda once the templates had been created in Webflow.

I also plan to implement an ajax lazy scroll for the events page as there are so many thumbnails.

All comments and thoughts gratefully received.

Thank you to the team at Webflow, I know I would not have been able to do this to this quality and sophistication in the timeframe without webflow.

9 Likes

Wow! Great design and love the colors you’ve chosen.

Great site :slight_smile: I’d change the menu size when you scroll down. It’s too big and takes waaaaaay to much height when scrolling down the page in my opinion. You can try to animate it when you scroll down and get it back to default when you scroll to the very top.

1 Like

@bartekkustra, how can it be done on webflow?

$(document).ready(function() {
	var big_menu = $('.header').height();
	var small_menu = big_menu/2;
	$(window).scroll(function() {
		if($(window).scrollTop() > 0) {
			$('.header').animate({
				'height' : small_menu
			});
		} else {
			$('.header').animate({
				'height' : big_menu
			});
		}
	});
});
2 Likes

Very nice indeed…i like the colors and interaction.

Wait, sorry, this may be quite a silly question… but could you explain this please???

When the document loads
$(document).ready(function() {


set variable big_menu to have a height of a current header class
var big_menu = $('.header').height();


set variable small_menu to have a half of the size of big_menu variable
var small_menu = big_menu/2;


when you scroll the browser window
$(window).scroll(function() {


scrollTop() have a number of pixels you have scrolled down from the top of the window. If it’s higher than 0 (so if you scrolled down) then…
if($(window).scrollTop() > 0) {


// animate an object that have a class header
$('.header').animate({


set its height to the amount held in small_menu variable
'height' : small_menu


});


otherwise, so if you scroll back to top or you didnt scroll so far
} else {


animate an object that have a class header
$('.header').animate({


and set its height to the amount held in big_menu variable. This is the one that have a height that was when the page loaded - original height of header
'height' : big_menu


Closing brackets :slight_smile:

			});
		}
	});
});

Great! Thanks, so I just set the class of the menu to big_menu?

var big_menu = $('.header').height();

This one here. Change the .header to whatever your class of header is. So in egzample, if you have a header that has class .legen-waitforit-dary-menu change the line at the beginning og this post to:

var big_menu = $('.legen-waitforit-dary-menu').height();

Very attractive site - thanks for sharing it!