Viewing Video backgrounds and page animations

  1. Portal Home
  2. Forum
  3. EverWeb
  4. Feature Requests

Video backgrounds and page animations



User: Chris B. 11 years ago
Hi guys, totally love this software for me it's yet another reason to love my Mac.
However I still end up having to use other software (on windows) for some simple things.

1. People seem to be very keen on video backgrounds on sites I.e. Outside the page, these are small loops (small in size) for example clouds rolling over a mountain.

2. Page animation, as you scroll down images slide in or text slides into place giving a pleasing effect.

These are things I seem to be asked for by clients all the time, I did post about parallax scrolling but this was ignored.

Can we perhaps have something in the next big releace please? And finally when is the blog update due to land and will this force us to use everwebs hosting or can we stick to our own and pay a yearly service charge to use these sevices?.
User: Jumbo T. 11 years ago
To get you started :

https://www.google.com/search?q=video+background+html5
User: Chris B. 11 years ago
Cheers Jumbo that's what I was looking for but something to be built in under the hood.

See this link http://seriftemplates.com/videoplus-demo/

This is a design tool that simply allows for this to happen without code injection. Don't get me wrong I don't mind coding I still use dreamweaver for a lot of my PHP websites, I just thought it would be nice to include something like this in a tool that has currently got the market lead in the Mac development scene.
User: Jumbo T. 11 years ago
Based on these files :

http://seriftemplates.com/videoplus/css/images/mesh.png
http://seriftemplates.com/videoplus/videos/mountains/mountains.mp4
http://seriftemplates.com/videoplus/images/posters/mountains.jpg

Add the files to the Assets.

Use this code and paste it in a HTML Snippet:

<style>

#pattern {
background: url("{!-ASSETSPATH-!}Images/mesh.png") repeat;
height: 100%;
left: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
z-index: 0;
}

video#bgvid {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background: url("{!-ASSETSPATH-!}Images/mountains.jpg") no-repeat;
background-size: cover;
}

</style>

<video autoplay loop poster="{!-ASSETSPATH-!}Images/mountains.jpg" id="bgvid">

<source src="{!-ASSETSPATH-!}External%20Files/mountains.mp4" type="video/mp4">

</video>

<div id="pattern"></div>

And if you want a Full screen browser window, add this code to a HTML Snippet as well :

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<input type="button" value="click to switch to fullscreen" onclick="requestFullScreen()">

<script type="text/javascript">

function requestFullScreen() {

var el = document.body;
// Supports most browsers and their versions.

var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;

if (requestMethod) {
// Native full screen.
requestMethod.call(el);
} else if (typeof window.ActiveXObject !== "undefined") {
// Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
</script>

All the information was found on the internet.

Last edit 11 years ago
User: Chris B. 11 years ago
Cheers Jumbo thats great, how can i make it with a white page the paste gave me a clear background? I want to have the video playing behind the web page to the edges of the browser no matter what size it is.
User: Chris B. 11 years ago
RageSW is this functionality something your going to add as standard at some point?
User: Jumbo T. 11 years ago
Here's the result :

http://tahafut.hol.es/bgvid/
User: Chris B. 11 years ago
Cheers Jumbo thats great :-)
✔ Best Answer  
User: Courtney H. 11 years ago
[quote name=Jumbo T. time=26/01/2015 15:14:00]Here's the result :

http://tahafut.hol.es/bgvid/

Wow!

-------------------------------
MrCourtney - Honolulu, HI
--------------------------------------
Mac Studio - dial monitors; iMac 27 5K - Dual Monitors - 10 TB hub
Alienware: Area 51 - 24 gb - Dual Monitors - All SSD
25 TB network storage
User: Roddy 11 years ago
The Big Video widget will add a full screen background movie and only requires an MP4 file.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.


Post Reply
You must login or signup to post.