Streaming live at 10am (PST)

Brand Radio Agency in Paris France - Website


#1

Hello everyone, I just wanted to share a site I built on WebFlow.
Thanks to WebFlow for making it so easy to create the basic structure of the site!

Cheers - You can view it at http://goomv2.webflow.com

Any feedback or tips is greatly appreciated!


Scroll down -> Animations like on Webflow main page
#2

Sweet site @liberrtines! A lot of cool interactions too!


#3

Very nice. I enjoyed myself very much playing around with this. The loading overlay seemed to hang even when it appeared that everything was loaded and I couldn't figure out if there were any playback controls on radio page but again you mention you're not finished so I'll just shutup =)

Very nice. Good work and thanks for sharing. Please remind us when its finished.


#5

Thanks everyone!

The radio section is gone for now, but i'll continue to work on it offline.


#6

@liberrtines C'est excellent! Bravo. Can you share how you implemented the appearing/disappearing text and also the sliding elements on the homepage? Cheers!


#7

Merci Laurent!

For the sliding element on the homepage, I followed carefully the code here
http://tympanus.net/codrops/2013/07/18/on-scroll-effect-layout/


For the appearing/disappearing text -

I created a div block with a class name .ticker, with a height of 90px
In this div, I have 6 H1 Text that stacks on top of each other

In my external .css file, I added

.ticker {
    overflow: hidden;
    height: 90px;
    vertical-align: baseline;
}

.ticker h1 {
    margin-bottom: 0px;
    height: 90px;
    -webkit-transition: margin-top 0.5s ease-in-out;
    -moz-transition:    margin-top 0.5s ease-in-out;
    -o-transition:      margin-top 0.5s ease-in-out;
    transition:         margin-top 0.5s ease-in-out;
}

And in my external .js, I added

   var current = 1; 
    var height = jQuery('.ticker').height(); 
    var numberDivs = jQuery('.ticker').children().length; 
    var first = jQuery('.ticker h1:nth-child(1)'); 
    setInterval(function() {
        var number = current * -height;
        first.css('margin-top', number + 'px');
        if (current === numberDivs) {
            first.css('margin-top', '0px');
            current = 1;
        } else current++;
    }, 2500);

Hope this helps


#8

Un grand merci @liberrtines. Where do you host your external files? Right now my CSS is in my public dropbox folder, but during my page speed test I've noticed that this simple 12kb takes a long time to load, probably because of dropbox's security features.


#9

Your welcome!

I use amazon s3 which is provided by the company, and I host it there.

Yeah, using dropbox is probably not the best idea smile


#10

Bonjour, c'est un template extraordinaire ! est-ce qu'il est possible d'acheter ce template ?
It's a great template, is it possible to buy it ?


#11

Merci Julien,

I can't sell it because it is now property of GOOM, and live at http://goom.fr, but thanks for the offer!


#12

@liberrtines if I understand correctly, the way to implement this is to create a Div and give it a class "cbp-so-scroller" then add whatever you want inside. Then you'd copy the JavaScript inside the webflow's sites custom code and finally you'd link the CSS in that script to where you're hosting it. Is that correct?


#13

Beautiful! I'm really loving this site! Great job @liberrtines


#14

Yes exactly, this is what I did. Feel free to send me a private message if you need more specific help


#15

@liberrtines I looked everywhere but I can't find a way to PM you. My two basic questions are:
1) what do you replace "figure" and "article" with within webflow? div is div and section is section, but those two I'm not sure.
2) where in the javascript do you point to the hosted CSS file?

Merci!


#16

To PM you just click on the person profile and on the left side you can find Private Message button right under the photo smile


#17

Check http://cdnjs.com/ to see if they have the js file already hosted.


#18

Hey, Great Website!

I was wondering how you managed to get the bar at the bottom of the main navbar to follow with the mouse, and also how you got the flashing down arrow at the bottom of the hero?

Any help would be welcome.


#19