PLAY VIDEO ON SCROLL - GSAP Scrolltrigger Elementor (No plugin) - 이중 자막
Okay, watch this I scroll down and the video starts playing I scroll back up and it reverses
It's just so satisfying to feel like you're in control of the scrolling pace and here comes the website content.
Once I found out that this is possible without a plugin in Elements I had some fun and here is an example of Sean Claude Van Damme going into a split.
I don't want to hurt him so I won't scroll all the way down.
Okay, just shoot.
So here comes the website content.
Let me go ahead and show you how to do this inside Elementor for free and without a plugin.
As you can see, we only have the elements are hidden up here.
I won't be showing you how to rebuild that because I just want to go straight into the juicy stuff.
So let's start off by creating a virgin container.
make sure that the container has a width of 100% like this.
Then you'll need to search for the video widget and drag it in because you can actually use any video you like.
I'll just go ahead and find the video I want to use the watermelon video and upload my video and just find it here.
Just make sure it's an mp4 file or else it won't work.
Now look for video options and find mute.
Make sure it's toggled on.
And down here you can see we have a player control.
But this will ruin the entire experience if you could see that.
So make sure it's deactivated here.
Then let's just take a look at it in full width and you can see we have this wide padding around it.
To remove that, you will have to go to into the container advanced and click here on padding and remove them.
Let's just incorporate the header by removing the background and just giving it a minus margin of 120.
So now in full width it look like this.
By the way, a quick cycle.
time you can also just download this as a ready-to-import template and you will also get the truck website.
You just import it directly into Elementor like this.
I'll show you how to do it later in the video.
Okay now it's time for the secret ingredients in order for this scroll trigger video to work.
We need to use a few lines of code but don't worry you don't need to know
anything about code you just need to insert it but before we do that I just
forgot one very important thing and that is that you have to click on the container and set this height to 500.
and set it to view height.
So now we have a lot of white space we can scroll upon.
Okay, go ahead and search for the HTML widget and insert it down here.
In the description of this video, you'll find this line of code.
just go ahead and find this copy button and copy it then go back to Elementor and insert it
okay so that's it for now just click update and let's go ahead and view it in a new
tab let's test it out okay so the video is playing on scroll but
we have all of this white space so that's because we need this section to be
sticky so to achieve that you go back to Elementor and navigate to the container
or actually the video and go into advanced and scroll down and look for this motion effects.
Here you can activate sticky at the top and also remember to activate this state in column.
Let's now go ahead and update and refresh.
Now it's sticky but two important things you need to know before ending this.
One, if you have more content on the page, which I had in the final result, you need to
do one thing or else it won't be visible.
So if I go back to Elementor editor, you can now see that I have added some content down here.
But this content is behind the video,
so you need to activate the set index by clicking on the container of the video,
setting this to 0 and go back to the other container or your other content on the webpage and set this to 1.
So now when I refresh this page,
I'm going you can see if I scroll down the other content appears okay and the other thing
you need to know which is probably the most important thing is that this
video won't work if you don't have a 30 frame per second video and you don't
need to know what that means just know that inside of this link you can down
here find an online
I'll just quickly show you how to do this if your video is lacking so click on this and drag it in and down here
You set the frame rate to 30 and just click
Now you will get a converted file with the right frame per second video that you can upload to
your website and it won't be lacking.
If you want to save time and just import this website I built as a ready to make template go to the link in the description and click I want this
then insert your email here and click get and here you go.
Now you have an downloadable file you can just add in click on the template and go to
and drag in the file you just received and insert it.
There you go, now you have the final website imported.
더 많은 기능 잠금 해제
Trancy 확장 프로그램을 설치하면 AI 자막, AI 단어 정의, AI 문법 분석, AI 구술 등을 포함한 더 많은 기능을 사용할 수 있습니다.
인기 있는 비디오 플랫폼과 호환
Trancy는 YouTube, Netflix, Udemy, Disney+, TED, edX, Kehan, Coursera 등의 플랫폼에서 이중 자막을 지원하는데 그치지 않고, 일반 웹 페이지에서 AI 단어/문장 번역, 전체 문장 번역 등의 기능도 제공하여 진정한 언어 학습 도우미가 됩니다.
다양한 플랫폼 브라우저 지원
Trancy는 iOS Safari 브라우저 확장 프로그램을 포함하여 모든 플랫폼에서 사용할 수 있습니다.
다양한 시청 모드
극장, 읽기, 혼합 등 다양한 시청 모드를 지원하여 전체적인 이중 자막 체험을 제공합니다.
다양한 연습 모드
문장 청취, 구술 평가, 선택 공백, 테스트 등 다양한 연습 방식을 지원합니다.
AI 비디오 요약
OpenAI를 사용하여 비디오 요약을 생성하여 핵심 내용을 빠르게 파악할 수 있습니다.
AI 자막
3-5분 만에 YouTube AI 자막을 생성하여 정확하고 빠른 자막을 제공합니다.
AI 단어 정의
자막에서 단어를 탭하면 정의를 검색하고 AI 단어 정의 기능을 활용할 수 있습니다.
AI 문법 분석
문장에 대한 문법 분석을 수행하여 문장의 의미를 빠르게 이해하고 어려운 문법을 습득할 수 있습니다.
더 많은 웹 기능
Trancy는 비디오 이중 자막 뿐만 아니라 웹 페이지의 단어 번역 및 전체 문장 번역 기능도 제공합니다.