A video and animated text question

#1

Hi,

Please look at this page: https://clockworkstudio.squarespace.com

I have embedded the video from WISTIA (Wistia.com) based on a tip from Squarefront

Step 1: Pick a template with an Index.
Step 2: Add a Gallery to the Index, move it to the top-most page of the folder.
Step 3: Add a "Video" to the Gallery and nothing else.
Step 4: Upload your video to Wistia.com. Embed your video using Wistia.

This solution works ok. But can you make it so when opening a page on tablets and smartphones, this video is disabled and a "static" image with logo is shown?

If you have a better solution to embed video, that does not need the service from Wistia, but have the same capabilities (autoplay on load, loop, not showing any videoplayer controls etc.)

The second request is animated text. There are some lines that should be animated.
Here is a "demo" which is quite similar what I am looking for: codyhouse.co/demo/animated-headlines/index.html
The "type" example is nice.

The text that should be animated is:
1) "produserer over 1500 unike filmer i året"
2) "5700 sendemastere"
3) 21 dedikerte medarbeidere"
4) 2 avdelinger
5) et stort effektivt internasjonalt nettverk
6) 1 effektivt studio

The whole sentence should be animated in and out, and we also need the flexibility of changing the sentence.

This animated text should appear on the site (Clockwork), just below "clockwork er norges største og mest effektive reklamefilmstudio"

Can you do this, and what is the estimated time?

Best regards,
Tor Martin

#2

I'm in a big rush right now, out for a week vacation, gotta catch a plane.

But I just wanted to tell you, yes, yes and yes. All that's doable, time estimate still is "starting April 29th" (I had said May before, now a fixed crazy talk).

Disabling it for tablets and smartphones is actually quite complicated. What we'd do, instead, is just disable it for small screens. It's a matter of finding the element and using CSS. But maybe you won't want this, since...

We can do it with youtube or vimeo. Search for "video background" in this forum, you'll see some threads about it already.

And those animated headlines are all javascript. I could even copy them straight from that site.

I'm off for now! wink

#3

Hi, hope that you had a nice vacation.

Both disabling video for tablets and smartphones, and text animation is still something the client wants a price on. In addition my client wants to know how you could solve this:

If you scroll down and see where Clockwork presents the coworkers, there is a list with a lot of names. The client would like to know if its possible to add a behaviour on "mouse hover" and on "mouse click".

This picture is a dummy on a mouse hover (on a name) function:

Mouse_hover.jpg1988x1416 145 KB

This picture is a dummy on mouse click (on a name) function:

Mouse_click.jpg1988x1416 175 KB

So, basically a behaviour that shows a picture of the coworker on hover, and a more in-depth bio when the user clicks a name.

And how would this transfer to tablets and smartphones?

Looking forward to your answer.

Best regards,
Tor Martin

#4

Vacations were wonderful, thanks! smile

Costs are like before. I need U$ 321 to begin working on it. Count 1 week from the moment you pay, and that's usually when I'll be able to start. All of what you request here so far can fit this minimum cost, including the mouse hover and mouse click.

The only real issue with this last request is how to use squarespace interface to make it as easy as possible for your client to add those pictures and in-depth bios for each coworker name. I picture 3 possibilities. Making a:

  • Blog post for each name. This might be a bit of an overkill and maybe it's only possible to do on a dedicated blog page (rather than a regular page).
  • Gallery. This might be very tricky and too much limiting, both for the bio and the amount of names (pictures) allowed (either 20 or 30). Or in last case;
  • Code block. Not the easiest for a user to deal with, but it will work best and it's limitless.

Which method to choose will depend on more specifics of what you need / want or in simply trying it out and moving along.

Finally, tablets and smartphones don't have the mouse hover, so we just make the name also accept clicks / taps. Very much like squarespace's sub menus (if you add pages in a folder, check www.neumann-int.com for instance).

PS: I can't see the website. It asks for a password.

#5

Hi,
password is "clockwork".

I´ll tell my client that this is possible within $321, and about the three solution. I reckon that a code block is the most "flexible" solution. Is quite important that we can deliver the design on both "hover and clicked state", and that this is incorporated in a nice elegant way.

And if you know about a "smarter" solution on how to show a picture and have the ability to see a in-depth bio, we are open for all ideas smile

I´ll let you know what my client says.

Regards,
Tor Martin

#6

D'oh. Should have guessed it. smile

Achieving this desired design on how it will look on the website is by far the easiest part. The whole problem is making the interface for the website admin.

As for coming up with new ideas on how to do it, well, I'm no designer. All I can do is find nice ways and copy them or mix them up, while being a bit clueless if that's actually good for the website design! That being said...

I like how (now looking at) the website contains very little text. I would try to come up with an artistic way to show the members. Such as adding the 14 members as people in a circle, to resemble a clock. Then clicking on each member would show the name and bio.

In any case, I think clicking up to show the bio is the smartest solution there... But if they all already got a vimeo portfolio, again, I'd go with a video rather than text. I find images and videos always easier to digest, but I could be biased. smiley

#7

Hi, just a quick reply that the client want to go for this. What is the best way to pay, to make sure that the client gets the receipt that they need?

Regards,
Tor Martin

#8

That's great! +1

I can send you a paypal invoice like last time. What you want me to write?

#9

You can write:
Schjarven film AS
Att: Hilde Holland Madsen

Bydoey Allé 23
0262 oslo

And send the PayPal to Tor.martin.norvik@schjarven.no

Which mail do you want me to use when inviting you as an administrator?

#10

And add two lines about helping out with the clockwork webpage smile

#11

Okay, done. See if it's okay.

And you can send the invite to any email. They all come to my same inbox. wink

#12

Perfect, the invoice is paid and you are invited as an administrator.

Some questions regarding the progress:

1) Videobanner

When do you need the still image that should be shown when visiting the webpage on tablets and smartphones? Could you start with a "dummy.jpg", that the client can change further down the line?

2) Text-animation

Would it be easy for the client to change the text after you have set up the code for animating it?

3) Hover & Click information

We will deliver the final design, but how do you want it delivered? Or how do you want to build it up? We could deliver a design that is somewhat similar to the pictures shown earlier in this thread. And we could deliver this in separate pngs if that is the best way. And I reckon the text (Bio & url´s) should be delivered as plain text?

We will deliver a design-mockup that describes text formatting and layout.

4) Bonus question

Please look at the following links:
http://cxnews.azurewebsites.net/articles/tech
http://cxnews.azurewebsites.net/articles/sports
http://cxnews.azurewebsites.net/articles/business

How hard would it be to implement a banner-solution shown on these pages? We will deliver the images needed, but we are not sure about the complexity.

Its such a cool effect smile
Looking forward to work with you again. The last client is very happy with your results!

Regards,
Tor Martin

#13

I'm very glad for this feedback. Thanks for sharing! You're also one of my best clients! smile

As for how easy it will be for the client to change anything from animated texts to videos, they should all be simple enough. Even if we go with a Code Block, I'll make it very small and easy to read. Because if there's lots of code needed, I can always use either the page or site code injection.

1) Sure, I'll use a dummy for the small screens. Also, I'm not clear if you want to use youtube or vimeo for the background.

3) You can choose how it's easier for you to deliver design mock ups. Keep in mind the responsive aspect of it and, thanks to that, I think it's important if you don't rely on a "pixel perfect layout". Yes, the text will be plain and not an image so it's easy to change at any time.

4) I'm not sure what you mean by "cool effect". All I can see are simple statical banners, with a little text on the right. Such as this:

#14

4) If you scroll down the page, do you see a 3d banner on those links?

#15

Haha, oh yeah, now I do! I had scrolled down before but I must have been very distracted. I can see a 3D / parallax effect with a rolex or sigma camera lenses. Very cool advertising effect!

Making the script for that is as easy as copying it. The difficult part is creating (and then having an interface for adding) the images that constitutes it. There are about 50 images there and you can see them changing if you scroll down slow enough.

Maybe it would be ideal to use dropbox for that. Since galleries can add up to 250 images, I can see it being done. Shouldn't be too hard to implement, but it might cost me an extra hour. I'll let you know once I finish working on the other items. stuck_out_tongue_winking_eye

#16

Okay, I'm done with the first 2 items.

I decided to let you know before finishing the 3rd one because then you can give some feedback and because I've stopped working for today.

  1. Screen sizes smaller than 750 (the current "mobile" default on squarespace) will show just the thumbnail image. Just to be clear, there's a small unnoticeable issue that if you click on it, it will load the video on the background but nothing will show on screen unless you resize to over 750. I decided to leave it there since less code is always better and I find it perfect enough as it is. wink

    The CSS and jQuery script are custom made to work with the videobanner section only while it has this name. You also have to make sure the video on the gallery has Use Thumbnail checked.

  2. I went for another script, which seemed much better imho: http://www.mattboldt.com/demos/typed-js/ the one under codyhouse was too big and results were hard to come around. I've spent too much time trying to come up with a good solution, and I find the current one to be satisfying for my standards. Please, do take a deep look there, and let me know if this is good enough so I can apply it to the main page. It is using a code block and some code in it (the time it pauses). (note to self: this have been much more complex than I estimated, especially trying to move the blinking cursor around)

#17

Hi, great job so far smile

I´ll jump on 2) first. Please see this link: https://clockworkstudio.squarespace.com/config#/pages|/new-page

Here you can see how the text should be formatted, H3 and some words in bold. (Hope that is possible).

And just write in one sentence. Wait two-three seconds while marker is blinking, then delete the sentence. (in a much faster speed than it was initially written in). Then write a new sentence in and follow the same procedure on all the sentences. After the last sentence is written and "deleted", loop it and start over again.

1) This is great, and should also be on "prosphere" and "showreel". How should people on smartphones be able to see the showreel? (If its locked for smaller screen sizes). What do you think?

3) I´ll come back to you with final design elements for this part. Are you able to start working on this now, or do you need some sort of mock-up before you can start? More than the two images showing "hover" and "clicked" state?

Regards,
Tor Martin

#18

3) Here is the two mock-up elements that you maybe can start to work with?


Let me know it this works for you.

Regards,
Tor Martin

#19

2) I see that the link I gave you sent you just to the main page. Here is a sceengrab of the text. You will find it under the page called "Text animation"

Screen Shot 2015-05-05 at 16.50.42.png2050x698 90.6 KB

Btw, this is a really nice forum solution.

Cheers,
Tor M

#20

It is great, isn't it?! smile

I found many interesting sites and communities just because I noticed they're using it, such as how to geek, open tech school, code combat and code newbie.

  1. Already applied to prosphere. I'm not sure why you even wanted this to begin with, so I can only guess what might work for you. I've made the thumbnail show on mobile with a play button, here: http://clockworkstudio.squarespace.com/testreel - I personally would simply leave it without any scripts. Just hit to play in any screen size. Because that video got sound.

  2. http://clockworkstudio.squarespace.com/text - If you look at the source there, you'll see you now only need a relatively small code block configuration right before the H3 to make it work. But there's no blinking marker, it's a little bug on Typed.js. I can go ahead and fix it later if you want it. There's also a little bug (again on Typed.js) on showing accents and the code for making it bold (actually called <strong>, there) which I will probably fix later.

  3. I was going to work on it without the mockup, so it sure helps to have it closer to what you want already! wink