whois ارسال شده در آگوست 6 2021 #1494 اشتراک گذاری ارسال شده در آگوست 6 2021 سلام من از این کد برای Scroll Line استفاده میکنم: HTML: <div class="scroll-line"></div> <script> $(window).scroll(function(){var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height(); var scrolled = (wintop/(docheight-winheight))*100; $('.scroll-line').css('width', (scrolled + '%'));}); </script> CSS: .scroll-line { height: 2px; margin-bottom: -2px; background-color: #5C64C5; width: 0%; position: fixed; top: 0; z-index: 9999; } من میخوام این بشه لودر صفحه، یعنی هنگام لود سایت بیادش و با درصد لود سایت پر بشه و بعد از لود غیب بشه. چجوری اینکارو بکنم؟ لینک به دیدگاه به اشتراک گذاری در سایت های دیگر گزینه های به اشتراک گذاری بیشتر...
مدیر کل | موسس سایت Support ارسال شده در آگوست 6 2021 #1495 مدیر کل | موسس سایت اشتراک گذاری ارسال شده در آگوست 6 2021 اگه منظورتون رو درست متوجه شده باشم. ابتدا کدهای زیر رو تو custom.css کپی کنین .progress { position: relative; height: 2px; display: block; width: 100%; background-color: white; border-radius: 2px; background-clip: padding-box; /*margin: 0.5rem 0 1rem 0;*/ overflow: hidden; } .progress .indeterminate { background-color:black; } .progress .indeterminate:before { content: ''; position: absolute; background-color: #2C67B1; top: 0; left: 0; bottom: 0; will-change: left, right; -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; } .progress .indeterminate:after { content: ''; position: absolute; background-color: #2C67B1; top: 0; left: 0; bottom: 0; will-change: left, right; -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; -webkit-animation-delay: 1.15s; animation-delay: 1.15s; } @-webkit-keyframes indeterminate { 0% { left: -35%; right: 100%; } 60% { left: 100%; right: -90%; } 100% { left: 100%; right: -90%; } } @keyframes indeterminate { 0% { left: -35%; right: 100%; } 60% { left: 100%; right: -90%; } 100% { left: 100%; right: -90%; } } @-webkit-keyframes indeterminate-short { 0% { left: -200%; right: 100%; } 60% { left: 107%; right: -8%; } 100% { left: 107%; right: -8%; } } @keyframes indeterminate-short { 0% { left: -200%; right: 100%; } 60% { left: 107%; right: -8%; } 100% { left: 107%; right: -8%; } } کد زیرو تو تگ body قرار بدین: <div class="progress" id="PreLoaderBar"> <div class="indeterminate"></div> </div> اگرم میخوای بعد لود کامل صفحه مخفی شه از کد جاوای زیر استفاده کن document.onreadystatechange = function () { if (document.readyState === "complete") { console.log(document.readyState); document.getElementById("PreLoaderBar").style.display = "none"; } } IPSforum.ir لینک به دیدگاه به اشتراک گذاری در سایت های دیگر گزینه های به اشتراک گذاری بیشتر...
 whois ارسال شده در آگوست 6 2021 نویسنده #1496 اشتراک گذاری ارسال شده در آگوست 6 2021 در 2 ساعت قبل، Arash.Ranjbar گفته است : اگه منظورتون رو درست متوجه شده باشم. ابتدا کدهای زیر رو تو custom.css کپی کنین .progress { position: relative; height: 2px; display: block; width: 100%; background-color: white; border-radius: 2px; background-clip: padding-box; /*margin: 0.5rem 0 1rem 0;*/ overflow: hidden; } .progress .indeterminate { background-color:black; } .progress .indeterminate:before { content: ''; position: absolute; background-color: #2C67B1; top: 0; left: 0; bottom: 0; will-change: left, right; -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; } .progress .indeterminate:after { content: ''; position: absolute; background-color: #2C67B1; top: 0; left: 0; bottom: 0; will-change: left, right; -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; -webkit-animation-delay: 1.15s; animation-delay: 1.15s; } @-webkit-keyframes indeterminate { 0% { left: -35%; right: 100%; } 60% { left: 100%; right: -90%; } 100% { left: 100%; right: -90%; } } @keyframes indeterminate { 0% { left: -35%; right: 100%; } 60% { left: 100%; right: -90%; } 100% { left: 100%; right: -90%; } } @-webkit-keyframes indeterminate-short { 0% { left: -200%; right: 100%; } 60% { left: 107%; right: -8%; } 100% { left: 107%; right: -8%; } } @keyframes indeterminate-short { 0% { left: -200%; right: 100%; } 60% { left: 107%; right: -8%; } 100% { left: 107%; right: -8%; } } کد زیرو تو تگ body قرار بدین: <div class="progress" id="PreLoaderBar"> <div class="indeterminate"></div> </div> اگرم میخوای بعد لود کامل صفحه مخفی شه از کد جاوای زیر استفاده کن document.onreadystatechange = function () { if (document.readyState === "complete") { console.log(document.readyState); document.getElementById("PreLoaderBar").style.display = "none"; } } این دوتا مشکل داره، اول اینکه پایین وبسایت میاد بجای اینکه بالای وبسایت بیاد، دوم اینکه من میخوام از 0% تا 100% اون لودینگ جلو بره، دقیقاً مثل scroll-line. اگه متوجه منظورم نمیشید لطف کنید وارد وبسایت من بشید (gamegg.ir) و اسکرول رو به پایین بکشید، هرچی پایینتر برید اسکرول بیشتر جلو میره تا اینکه به آخر صفحه میرسید تا آخر پر میشه (100% میشه). من میخوام اینم موقع لود کردن صفحه اینجوری باشه، از 0% تا 100% جلو بره و وقتی که لودینگ صفحه تمام شد و صفحه کاملاً لود شد، این خط هم 100% بشه و غیب بشه. لینک به دیدگاه به اشتراک گذاری در سایت های دیگر گزینه های به اشتراک گذاری بیشتر...
مدیر کل | موسس سایت Support ارسال شده در آگوست 7 2021 #1497 مدیر کل | موسس سایت اشتراک گذاری ارسال شده در آگوست 7 2021 @MH11 سلام مجدد طبق آموزش زیر پیش برین (امیدوارم این چیزی باشه که میخواین) اول از همه دوتا فایل زیر رو در محلی که انجمن رو نصب کردین قرار بدین (در هاست) nprogress.css nprogress.js سپس قالب خودتون رو ویرایش کنین و فایل globaltemplate رو باز کنین و در آخر کدها قبل از تگ بسته body کد زیر رو قرار بدین و ذخیره کنید <script type="text/javascript"> NProgress.start(); NProgress.done(); </script> رنگ و سرعت رو هم میتونی با ویرایش فایل ها تغییر بدی IPSforum.ir لینک به دیدگاه به اشتراک گذاری در سایت های دیگر گزینه های به اشتراک گذاری بیشتر...
 whois ارسال شده در آگوست 10 2021 نویسنده #1501 اشتراک گذاری ارسال شده در آگوست 10 2021 در در ۱۴۰۰/۵/۱۶ در 11:24، Arash.Ranjbar گفته است : @MH11 سلام مجدد طبق آموزش زیر پیش برین (امیدوارم این چیزی باشه که میخواین) اول از همه دوتا فایل زیر رو در محلی که انجمن رو نصب کردین قرار بدین (در هاست) nprogress.css 1.42 kB · 1 دریافت nprogress.js 11.82 kB · 1 دریافت سپس قالب خودتون رو ویرایش کنین و فایل globaltemplate رو باز کنین و در آخر کدها قبل از تگ بسته body کد زیر رو قرار بدین و ذخیره کنید <script type="text/javascript"> NProgress.start(); NProgress.done(); </script> <script type="text/javascript"> NProgress.start(); NProgress.done(); </script> رنگ و سرعت رو هم میتونی با ویرایش فایل ها تغییر بدی اینم تست کردم اما این Preload هم باز اونی نبود که میخواستم. ببینید توی عکس بالا، اون خط بنفش رنگ که تقریباً تا یک سوم عرض صفحه جلو رفته، میخوام همینجوری باشه از اول تا آخر بیاد و وقتی لود صفحه تموم شد، اون خط غیب بشه. یعنی حالت Progress باشه، با لود صفحه جلو بره تا پر بشه و بعد از لود شدن صفحه غیب بشه. یعنی فقط یکبار پر بشه و افکت loop نداشته باشه. قالب Borx Gaming Theme دقیقاً همون Preload رو داره که میخوام. میشه کد Preload قالب Borx رو گیر آورد گذاشت برای این؟ لینک به دیدگاه به اشتراک گذاری در سایت های دیگر گزینه های به اشتراک گذاری بیشتر...
مدیر کل | موسس سایت Support ارسال شده در آگوست 10 2021 #1502 مدیر کل | موسس سایت اشتراک گذاری ارسال شده در آگوست 10 2021 دوست عزیز همین آموزشکه قرار دادم عین همین چیزی هست که شما میخواین IPSforum.ir لینک به دیدگاه به اشتراک گذاری در سایت های دیگر گزینه های به اشتراک گذاری بیشتر...
راه حل  CHRIS-7 ارسال شده در آگوست 10 2021 #1504 راه حل اشتراک گذاری ارسال شده در آگوست 10 2021 در 5 ساعت قبل، MH11 گفته است : اینم تست کردم اما این Preload هم باز اونی نبود که میخواستم. ببینید توی عکس بالا، اون خط بنفش رنگ که تقریباً تا یک سوم عرض صفحه جلو رفته، میخوام همینجوری باشه از اول تا آخر بیاد و وقتی لود صفحه تموم شد، اون خط غیب بشه. یعنی حالت Progress باشه، با لود صفحه جلو بره تا پر بشه و بعد از لود شدن صفحه غیب بشه. یعنی فقط یکبار پر بشه و افکت loop نداشته باشه. قالب Borx Gaming Theme دقیقاً همون Preload رو داره که میخوام. میشه کد Preload قالب Borx رو گیر آورد گذاشت برای این؟ اون چیزی که میخواهید رو سال ها پیش تست کردم و استفاده میکردم ولی سایتش دیگه نیست اما داکیومنت و فایل هاش تو گیت هاب هست Automatic page load progress bar و باید از حالت "Minimal" استفاده کنید. اول فایل pace.min.js را دانلود و در globalTemplate فراخوانی کرده و کد css اون رو هم در custom.css قرار بدید. 2 1 @ اشتراک گذاری لینک به دیدگاه به اشتراک گذاری در سایت های دیگر گزینه های به اشتراک گذاری بیشتر...
پست های پیشنهاد شده
برای ارسال دیدگاه یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید
برای اینکه بتوانید دیدگاهی ارسال کنید نیاز دارید که کاربر سایت شوید
ایجاد یک حساب کاربری
برای حساب کاربری جدید در سایت ما ثبت نام کنید. عضویت خیلی ساده است !
ثبت نام یک حساب کاربری جدیدورود به حساب کاربری
دارای حساب کاربری هستید؟ از اینجا وارد شوید
ورود به حساب کاربری