7 Correct answers
@REELHERO- you can do something very similar to the example you showed:
Store your video information in an array of javascript objects (see the full page code below, name and title. Change to your video names and titles. Add however many name and titles you need. Include a comma after each line, except for the last entry).
Store your actual video files in a folder named 'movies'. You can name the folder what you like BUT the code below looks for the videos in a folder named 'movies' - (video.sr
...
i also noticed the video does not resize to fit the browser window - it crops the vid and unfortuntely i cant have that since its a showcase site - see the reference site -https://smugglersite.com/ if you resize the browser- the video resizes
By @REELHERO
No, the video is cropped to fit the screen. Look at the site on mobile in portrait orientation and then landscape orientation. You can't have a full page video or image without some part being cropped.
...one more thing - how would i slide up bu
---
1) for some reason the first vid doesnt show (ocean2.mp4) even though it is linked correctly..
By @REELHERO
You havent updated the javascript correctly. The 'default when page loads' should be as follows:
// Default when page loads
setTimeout(function() {
videoText.classList.add('slideUp' , 'fullOpacity');
setTimeout(function(){
video.classList.add('fullOpacity');
},100);
},300);
...Boom- you are wonderful and generous 🙂
2) still having the order issue it jumps from the opening vid (todd heyman) to
Unfortunately you have mangled the code l originally provided where its getting time consuming to keep putting it right. You can't successfully combine font sizes set in em and then just randomly guess at some percentage size to set for text within a container which has been set using em, it's a complete mess and why you are getting unwanted vertical space. I mean why on earth have you set bottom padding using viewport width instead of px or em, it makes no sense.
As for time delay yes of cours
...
See updated code below. Radical amendments to the code but should need very little changes to the code from your end - font and font sizes.
I've used the font-awesome 6 library to create the plus icons, its much cleaner.
Copy code, paste in a new document, save to your site folder and view.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Animation Delay</title>
<link rel="preconnect" href="https:
could you point out where to adjust speed of fade and slide up in the script ?- i can guess but just to be sure
By @REELHERO
Try adjusting how long the transitions take:
transition: all 1s ease-in-out;
Plus you can set the 700 to less:
myInterval = setInterval(textAnimateFunc, 700);
However there's no real 100% way, apart from keep tinkering around with the various css/javascript settings.
48
Replies
works gorgeously
https://toddheymandirector.com/index_video4.html
its not optimum but i use a redirect for mobile devices and there Ill keep it at fullscreen once i place this on mobile-- bc of the portrait mode as you mentioned - Im no web designer (thought i promise i will clean up my code now that it works well ) and eventually I will employ one to take over when Im entirely focusing on direction..
So grateful for all your help!
By @REELHERO
Well you have big issues as it doesnt work now its NOT full screen! Reduce the browsers viewport and see the result. Users will have different width browser viewports so they will see a bit of a layout mess.
In my view its better off as a full screen application. Creatives can get the feel for a good production whether its cropped or not. Stick a button on each video which opens a modal overlay where the user can see the full view video, if you really need it.
ah - so its the same - maybe bc i know my work so well i notice it more--
ok - one final question- id like to reduce the verical space between just the first title "TODD HEYMAN - FILM DIRECTOR" i was able to reduce the size by adding a class with a percentate (brand_heyman, title_heyman) but i cant get the space between to change - ive used a negative margin, neg line height but it wont budge
The javascript may be a tough one to figure out but im nothing if not diligent.
By @REELHERO
The approach for the javascript needs to be completely re-written as at the moment the only item that is being animated is the 'videoText' container. To have each line of text slide-up/fade-in, with a delay, means they would each have to be animated individually. Maybe an animation library such as 'animate' would be of use to you. You just add a link the library then add the css styles to the items you want animated:
could you point out where to adjust speed of fade and slide up in the script ?- i can guess but just to be sure
By @REELHERO
Try adjusting how long the transitions take:
transition: all 1s ease-in-out;
Plus you can set the 700 to less:
myInterval = setInterval(textAnimateFunc, 700);
However there's no real 100% way, apart from keep tinkering around with the various css/javascript settings.
its choppy
https://toddheymandirector.com/index_video_delay.html
and should feel more like in speed and flow
but Im getting there
By @REELHERO
Well that's your fault for altering the speed, looks a bit crazy now, too fast. There was nothing wrong with the original speed.
The example you provided is completely different so you can't really compare.
I can only provide what l feel looks acceptable. If you disagree, start altering what l provided, without really knowing what you are doing, then don't like it, find an alternative solution. You're starting to become like some high maintenance client whose never quite happy.
I don't think the result of the code l provided is that different from the original smugglers website that you provided as an example. Infact its a subtle improvement given the text slides up, fades in and has a delay.
Good luck with your project.
AdChoices