I’ve been trying to present a very substantial amount of content into a single-page-design and finally found one that I’d like to emulate. I plan on using either the Foundry or Foundation theme for this new site.
The example website is: tenfoldengineering.com
The example site has approximately 12-14 ‘blocks’ that make up the one-page site. The sections I’d like to recreate with stacks are:
ANIMATION GRIDS — in the 3rd-5th blocks on the example site
The site is mainly made up of grids that when clicked, expand the content of a slider) with an indicator-arrow showing which grid is open, similar to an accordion that closes when it, or another grid square is clicked.
VIDEO GRIDS —the 7th-9th blocks on the example site
(with the same indicator-arrow) opens to a video slider
The Q&A Section (approx the 10th block) that uses a similar grid-style for their FAQ/Q&A
The parts of the grid I like which I haven’t been able to find in any stacks so far are:
• the closeness of the grid squares to each other
• the arrow-indicator when a grid square opens in an accordion/tab style (the most important feature that I like from the example site)
• the smooth continuity of the all of the one-page-blocks with the one solid color background throughout
THE ANIMATIONS
I’m asking about the example site’s content animation, not the kind of animations we use regularly animation of image and text stacks.
One of the services to be presented on the site I’m working on includes a lot of 3D Animation. I was previously planning on rendering out videos of the animations, though I’d love to present them similar to the example site, rather than another video on the site. Does anyone know what stack I could use to recreate the example animations? I was thinking Hype 3 from Tumult might work, then using an html stack for the resulting code from Hype 3. Just a guess, because I don’t understand html or any other web coding languages.
Also, I guess I’d have to find out on my own how to convert, or export my 3D animations to a method to be able to use in Hype 3, especially with the transparent (almost PNG) backgrounds of all of the animations.
The site is very simple, it’s the content that makes it look impressive.
1.
Foundation grid with no padding, each one containing a SectionPro who’s height is 100% it’s width (ie square) and then it’s content centered.
2.
The expansion on click can be done with JoeWorkman’s PeekABoo
3.
Videos … wait a couple of days and your question will be answered
4.
Animations … ummm have a look at SketchFab, it supports the playing of animations BUT you’ll need to create your models in specific software AND have a paid subscription to SketchFab.
I upload my models to SketchFab (https://sketchfab.com/dma-ni/models) and have them displayed on our site, click on one of the 1st few projects here https://www.dma-ni.com/dma_projects/ and you’ll see a ‘View in 3D’ button (not on mobile/tablet). We don’t have a paid subscription as we don’t need any of the advanced (animation, transparent backgrounds etc) features.
As Paul, says it is the amazing animations that make that site impressive.
Either Foundry or Foundation with a load of BWD stacks will allow you to make 99% of that site. Foundry already has a Video (Vimeo & uTube) slider which would be useful. The Foundry ScrollTo Buttons and Foundry Nav Overlay will give you the same navigation too.
I would also take a look at S4S AdaptiveGrid because it has total freedom to decide when to collapse the grid which may come in handy, depending on the length of the text in the grid boxes.
Edit. Just realised you want to create a single page design so you could just use a blank theme.
I now have the recommended, Stacks4Stacks @willwood AdaptiveGrid & Player (video) stacks, Peek A Boo from @joeworkman and SectionsPro from @tav BWD (also, if @PaulRussam has an idea). I still have questions about their implementation, as presented in the tenfoldengineering.com example site.
Remaining Questions
How can I create the indicator-arrows (in example site) if using the Adaptive Grid, BWD SectionsPro and/or Peek A Boo stacks. Which of these stacks’ settings creates the arrows to indicate when it’s expanded?
Which video player stack will ‘auto-play’, including mobile devices, and be in an invisible (no border or visible features) container, so it blends into the site’s background?
Re: ‘How to’ - 3D ANIMATIONS on the example site:
I figured out the method of the ’floating’ 3D models (I don’t understand code in ‘view-source’ or ‘inspect element’):
• I originally thought they were 3D animations made on a transparent-background, created/animated in html5, then placed into the web page.
• When viewing the example site on an older iPad/iOS, a ‘play’ button icon appeared on the transparent background and a video scrub-bar appears on a borderless player when pressed.
• So it’s simply auto-playing-videos, that also auto-plays on mobile, which was edited/created using the exact color background layer/plate as the website’s background color, and presented inside of a borderless, buttonless and featureless video player container. Very clever!
@PaulRussam, is there an update on the video solution you mentioned in your reply? The SectionsPro page mentions video-on-mobile, though I wasn’t able to see any demos other than (https://googlechrome.github.io/samples/muted-autoplay/index.html ). I got 4 different results from 3 iOS devices and a Mac. Can the SectionsPro video currently be set to emulate the example site animation videos?
Is there a place I can see an example site/page of the SectionsPro auto-play video?
Re: Sketchfab
I checked out the Sketchfab.com site and will be using them for the few 3D models planned for visitor-interaction.
Thanks for the suggestion @PaulRussam. The @joeworkman Video Wall looks great, though doesn’t have features that will help with my specific video goals/requirements. It doesn’t seem to have an autoplay feature (also auto-play on mobile) and it only hosts YouTube and Vimeo videos.
Due presenting videos to professional filmmaker visitors, I’d like a much better video quality than what YouTube and Vimeo offer. Most top production companies, filmmakers and agencies present all of their videos with no YouTube or Vimeo connection so they present better quality.
Also, I prefer no promotions, commercials, etc., before it plays, and no thumbnail-suggestions to other videos to watch, after a video ends.
I still would like the 3D animation videos to have no visible features (for a ‘transparent’ matching video-website color), no borders, scrub-bar, etc., as well as ‘looping’ for a constantly moving animation presentation.
Video Wall support autoplay. However, Apple does not allow autoplay on iOS. Self hosted videos will be coming as a feature in probably v1.1.
YouTube only places ads inside the video when you request it. Or if they discover that you are using copyrighted content.
The benefit of using Vimeo or YouTube is that they auto-generate the video at multiple bitrates and then serves up the correct video resolution based on the device the user is using. By self-hosting your video, it will most likely be much slower for mobile users.
The tenfoldengineering.com site is the example of how I wish to present 3D animations, and it does have ‘autoplay’ working on mobile. All videos on their site auto-played on my iPad Pro, iPhone 5, iPhone 7 plus, though it did not autoplay on my iPad 3 with an older iOS. It displayed a ‘play’ button and nothing else, no border, etc.
Is there a video player that can replicate the exact visual and function (or lack of function) features of the example website? Specifically with no border, no scrub bar, no ‘play’ or any other buttons… exactly (not similarly) like the 3D animation video examples throughout the tenfoldengineering.com site.
The RW video player stacks I’ve seen are really great for many purposes, though I do need to be specific for the 3D purpose of seamlessly blending into the site’s background color.
Regarding quality of YouTube & Vimeo vs self hosting, I understand the majority of videos on most websites are fine in 480 or 720p. I took the time to check after the last reply here, and found that none of my clients use Youtube or Vimeo-hosted vids for their web videos. Since they spend between $250,000-$1,000,000 just to shoot a :30 second commercial, they ask to see their vendor’s (me) work in the highest quality possible, and are more than willing to wait an extra moment or three for a better quality video to load. Also, I don’t really get visitors to my site from the general public, so my video needs are for film and ad industry-specific visitors using the latest computers and devices on the fastest of internet speeds.
Any suggestions for a completely borderless and visually-featureless video player stack (that also loops the video) is appreciated.
If ‘autoplay’ for mobile isn’t ready with Rapidweaver or Stacks yet, any idea how long it’ll be before video stacks can catch up to the example site I posted?
Awesome news @PaulRussam! Thanks for checking into it. I think I recall you having an amazing demo site a few years back, possibly with the word ‘playground’ in the web address. Do you still have it anymore?
@thang, I saw the advertised mobile-video feature and got the SectionsPro stacks few weeks ago and wasn’t able to find any video examples on the BWD site, other than the compatibility test at: https://googlechrome.github.io/samples/muted-autoplay/index.html. I had much different results on the compatibility test site than I did with the tenfoldengineering.com examples, so I’m not sure how to get it to play (or see BWD examples) on all (or most) mobile devices like the example site.
@tav, are there any video examples using SectionsPro? Do the settings on the video player have the ability to loop the video as well as be completely stealth visually, even if mouse-hovering, with no buttons, scrub-bar, border/frame, etc.?
It’s helpful for to know the video stacks’s features before I complete the video editing, color correction and encoding, so I can configure the video’s settings according to features available in the stack, for the seamless feel I’m trying to get.
Hi, the videos on the bottom of the tenfold page do not autoplay. What you are referring to are the animations which autoplay, but these are not videos - if I am correct?
@Fuellemann, yes, I understand your question, as it took me a few days to figure it out.
My guess of their reason for the non-autoplaying videos at the bottom is: since the videos at the bottom are the only videos of the ’real-world’ constructed-prototypes of their product, it’s presented in a standard video. Every other product is only an animated representation of their products, so they chose the cool ‘floating-on-the-page’ method to present them.
I’m pasting one of my previous comments from above to explain…
Autoplay support is heavily restricted on iOS or Android. My experience is that autoplay will only work on the newest devices, for smaller video files without an audio channel. In other words, small muted video clips only. Anything larger or with sound, seems to result in autoplay not working. I believe that Apple and Android implemented this policy, to protect users on slow / expensive mobile connections.
Needless to say, there are going to be a lot of places where autoplay will not work. Smartphones are getting ever more expensive, so the takeup of updates / upgrades is drawing longer. So I would never depend on an autoplaying video for a key component of a website. It would be safer to use a stack like RottenApple to replace the autoplaying video with a static image on mobile.
@design4film SectionsPro supports playing of background video on touch devices. Because it uses background video, the rules are different in terms of what touch operating systems allow. This is exactly the same method as the TenFold site in your example uses.
The video will automatically gracefully falls back to either a static image, gradient or colour as per the settings in the stack with no intervention required.
Because it is a background video there will be no play button or other player controls.
In order to autoplay background video on touch devices, it must be muted which the stack does automatically as soon as you opt to enable touch device support. It is therefore best to use videos without a sound track as they will be smaller in size.
As per the information page - use with restraint and be aware of users who may be bandwidth limited by their mobile phone contract. As with anything, what you use on a site depends very much on your target market and demographics of likely visitors.
