Jump to content
Sign in to follow this  
lucasramos999

Imagem no código script não aparece

Recommended Posts

Bom dia. Eu quero usar o mesmo efeito de distorção e noise que este site utiliza: https://www.vinylcuts.nyc/issue-03/issue-03-cover/. Percebam que as imagens sofrem distorções programadas, além de um ruído que lembra antigas TVs. É esse mesmo efeito que quero usar, mas quando aplico o endereço das imagens no código, elas não aparecem.



Este é o código do site onde as imagens são inseridas. É através desse comando que elas sofrem as distorções e ruídos.



var pageData = [{"title":"issue-03-cover","pageType":"standard","bkgndImgPath":"https://assets.vinylcuts.nyc/wp-content/uploads/2016/02/issue03_0000_cover_img00.jpg"}];


Este é o código principal responsável pelos efeitos: https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/vinyl-webgl.js?ver=1.05.11 .



O problema é que quando vou inserir as imagens, elas não aparecem. O único comando que parece funcionar é:



var pageData = [{"title":"splash","pageType":"splash"}];


Este comando acima está presente na página inicial. Ele é responsável pelos efeitos de listras em 3D. Vejam: https://www.vinylcuts.nyc/show/splash/ . Mas as imagens da logo,background e título que estão inseridas no código, também não aparecem. Qual será o problema? O que tem de errado? Por que não consigo carregar as imagens e ter esse efeito?



Abaixo são as bibliotecas principais utilizadas:


Capturar.PNG.eb3a4aa4ad59ce788a4d4ea20a4




O plugin que ele utilizou foi baseado em Three.js. Veja: https://github.com/felixturner/bad-tv-shader. Ele utilizou bibliotecas desse plugin e adaptou com novos efeitos através daquele código principal que eu enviei. Eu sei quais são as bibliotecas principais e tal, mas quando vou fazer os testes, as imagens não carregam. O código parece perfeito, mas não tenho ideia do que está gerando esse erro.




Este é um código bem resumido pra facilitar o entendimento. Perceba que no fundo só aparece um background escuro com as listras se movimentando em 3D e tem aquela leve distorção. No site original, primeiro aparece esse fundo e depois as imagens são carregadas. Tem um efeito "opacity" também. O que eu quero disso tudo é só conseguir carregar as imagens nesse código. Quem puder me ajudar eu agradeço muito.



<!doctype html>
<!-- dev test ! -->
<html lang="en-US" class="no-js" style="background-color:#000;">
<head>
<meta charset="UTF-8">



<!-- LIB -->
<script src="https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/lib/stats.min.js"></script>
<script src="https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/lib/TweenMax.min.js"></script>
<script src="https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/lib/ImprovedNoise.js"></script>
<script src="https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/lib/jquery.min.js"></script>
<script src="https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/lib/SimplexNoise.js"></script>
<script src="https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/lib/atutil.js"></script>

<!-- THREE -->
<script src="https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/lib/three/three.min.js"></script>
<script src="https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/lib/three/postprocessing/EffectComposer.js"></script>
<script src="https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/lib/three/postprocessing/RenderPass.js"></script>
<script src="https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/lib/three/postprocessing/ShaderPass.js"></script>
<script src="https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/lib/three/postprocessing/MaskPass.js"></script>
<script src="https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/lib/three/shaders/CopyShader.js"></script>
<script src="https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/lib/three/shaders/FilmShader.js"></script>
<script src="https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/lib/three/shaders/RGBShiftShader.js"></script>
<script src="https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/lib/three/shaders/VignetteShader.js"></script>
<script src="https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/lib/three/shaders/BrightnessContrastShader.js"></script>

<link rel='stylesheet' id='hbo_vinyl-css' href='https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/style.css?ver=1.0' media='all' />
<link rel='stylesheet' id='fontAwesome-css' href='https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/font-awesome.min.css?ver=1.0' media='all' />
<link rel='stylesheet' id='svg-css' href='https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/svg.css?ver=1.0' media='all' />
<script type='text/javascript' src='https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/lib/conditionizr-4.3.0.min.js?ver=4.3.0'></script>
<script type='text/javascript' src='https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/lib/modernizr-2.7.1.min.js?ver=2.7.1'></script>
<script type='text/javascript' src='https://www.vinylcuts.nyc/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='https://www.vinylcuts.nyc/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>

<link rel="alternate" type="application/json+oembed" href="https://www.vinylcuts.nyc/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fwww.vinylcuts.nyc%2Fshow%2Fsplash%2F" />
<link rel="alternate" type="text/xml+oembed" href="https://www.vinylcuts.nyc/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fwww.vinylcuts.nyc%2Fshow%2Fsplash%2F&format=xml" />



<style type="text/css">
body {
background:url(http://wallpaper.ultradownloads.com.br/277228_Papel-de-Parede-Belissima-Paisagem-de-Montanhas_1920x1200.jpg);
z-index:6000;
}

#webgl {



}
</style>

<script>
// conditionizr.com
// configure environment tests
conditionizr.config({
assets: 'https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl',
tests: {}
});
</script>



<script type='text/javascript' src='https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/app-loader.js?ver=1.05.11'></script>
<script type='text/javascript' src='https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/site.min.js?ver=1.05.11'></script>

</head>
<!-- BEGIN Krux Control Tag for "Vinyl Microsite" --> <!-- Source: /snippet/controltag?confid=KNhYNCzS&site=Vinyl%20Microsite&edit=1 --> <script class="kxct" data-id="KNhYNCzS" data-timing="async" data-version="1.9" type="text/javascript"> window.Krux||((Krux=function(){Krux.q.push(arguments)}).q=[]); (function(){ var k=document.createElement('script');k.type='text/javascript';k.async=true; var m,src=(m=location.href.match(/\bkxsrc=([^&]+)/))&&decodeURIComponent(m[1]); k.src = /^https?:\/\/([a-z0-9_\-\.]+\.)?krxd\.net(:\d{1,5})?\//i.test(src) ? src : src === "disable" ? "" : (location.protocol==="https:"?"https:":"http:")+"//cdn.krxd.net/controltag?confid=KNhYNCzS" ; var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(k,s); }()); </script> <!-- END Krux Controltag -->

<!--
Start of DoubleClick Floodlight Tag: Please do not remove
Activity name of this tag: Vinyl
URL of the webpage where the tag is expected to be placed: http://www.vinylcuts.nyc
This tag must be placed between the <body> and </body> tags, as close as possible to the opening tag.
Creation Date: 12/10/2015
-->

<script type="text/javascript">
var axel = Math.random() + "";
var a = axel * 10000000000000;
document.write('<iframe src="https://1234407.fls.doubleclick.net/activityi;src=1234407;type=hbogen;cat=vinyl0;dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;ord=' + a + '?" width="1" height="1" frameborder="0" style="display:none"></iframe>');
</script>
<noscript>
<iframe src="https://1234407.fls.doubleclick.net/activityi;src=1234407;type=hbogen;cat=vinyl0;dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;ord=1?" width="1" height="1" frameborder="0" style="display:none"></iframe>
</noscript>
<!-- End of DoubleClick Floodlight Tag: Please do not remove -->
<script>


THREE.BadTVShader={uniforms:{tDiffuse:{type:"t",value:null},time:{type:"f",value:0},distortion:{type:"f",value:3},distortion2:{type:"f",value:5},speed:{type:"f",value:.1},rollAmt:{type:"f",value:0}},vertexShader:["varying vec2 vUv;","void main() {","vUv = uv;","gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );","}"].join("\n"),fragmentShader:["uniform sampler2D tDiffuse;","uniform float time;","uniform float distortion;","uniform float distortion2;","uniform float speed;","uniform float rollAmt;","varying vec2 vUv;","vec3 mod289(vec3 x) {"," return x - floor(x * (1.0 / 289.0)) * 289.0;","}","vec2 mod289(vec2 x) {"," return x - floor(x * (1.0 / 289.0)) * 289.0;","}","vec3 permute(vec3 x) {"," return mod289(((x*34.0)+1.0)*x);","}","float snoise(vec2 v)"," {"," const vec4 C = vec4(0.211324865405187, // (3.0-sqrt(3.0))/6.0"," 0.366025403784439, // 0.5*(sqrt(3.0)-1.0)"," -0.577350269189626, // -1.0 + 2.0 * C.x"," 0.024390243902439); // 1.0 / 41.0"," vec2 i = floor(v + dot(v, C.yy) );"," vec2 x0 = v - i + dot(i, C.xx);"," vec2 i1;"," i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);"," vec4 x12 = x0.xyxy + C.xxzz;"," x12.xy -= i1;"," i = mod289(i); // Avoid truncation effects in permutation"," vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))"," + i.x + vec3(0.0, i1.x, 1.0 ));"," vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);"," m = m*m ;"," m = m*m ;"," vec3 x = 2.0 * fract(p * C.www) - 1.0;"," vec3 h = abs(x) - 0.5;"," vec3 ox = floor(x + 0.5);"," vec3 a0 = x - ox;"," m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );"," vec3 g;"," g.x = a0.x * x0.x + h.x * x0.y;"," g.yz = a0.yz * x12.xz + h.yz * x12.yw;"," return 130.0 * dot(m, g);","}","void main() {","vec2 p = vUv;","float ty = time*speed;","float yt = p.y - ty;","float offset = snoise(vec2(yt*3.0,0.0))*0.2;","offset = offset*distortion * offset*distortion * offset;","offset += snoise(vec2(yt*50.0,0.0))*distortion2*0.001;","gl_FragColor = texture2D(tDiffuse, vec2(fract(p.x + offset),fract(p.y-rollAmt) ));","}"].join("\n")};var GalleryPage=function(){var a,b,c,d,e,f=this;this.init=function(g){f.data=g,f.holder=new THREE.Object3D;var h=new THREE.TextureLoader;h.crossOrigin="";var i=new THREE.Texture;i=h.load(g.bkgndImgPath),i.minFilter=THREE.LinearFilter,i.maxFilter=THREE.LinearFilter,d=new THREE.MeshBasicMaterial({map:i,transparent:!0,opacity:0});var j=new THREE.PlaneGeometry(VinylBkgndConfig.BKGND_W/2,VinylBkgndConfig.BKGND_H,1,1);a=new THREE.Mesh(j,d),f.holder.add(a);var k=new THREE.Texture;k=h.load(g.textImgPath),k.minFilter=THREE.LinearFilter,k.maxFilter=THREE.LinearFilter,e=new THREE.MeshBasicMaterial({map:k,transparent:!0,opacity:0});var l=new THREE.PlaneGeometry(VinylBkgndConfig.BKGND_W/2,VinylBkgndConfig.BKGND_H,1,1);b=new THREE.Mesh(l,e),f.holder.add(b),b.position.z=-1,"right"===g.textSide?(a.position.x=-VinylBkgndConfig.BKGND_W/4,b.position.x=VinylBkgndConfig.BKGND_W/4):(a.position.x=VinylBkgndConfig.BKGND_W/4,b.position.x=-VinylBkgndConfig.BKGND_W/4),c=b.position.x},this.show=function(){TweenMax.to(d,.5,{opacity:1,delay:.5}),TweenMax.to(e,.5,{opacity:1,delay:.5}),b.visible=!1;var a=1;TweenMax.delayedCall(a,function(){b.visible=!0}),TweenMax.fromTo(b.position,.7,{x:-VinylBkgndConfig.BKGND_H/2+c,y:-VinylBkgndConfig.BKGND_H/2},{x:c,y:0,ease:Power2.easeOut,delay:a})},this.hide=function(){TweenMax.to(d,.5,{opacity:0}),TweenMax.to(e,.5,{opacity:0})},this.update=function(){}},Page=function(){var a,b,c=this;this.init=function(d){c.data=d,c.holder=new THREE.Object3D;var e=new THREE.TextureLoader;e.crossOrigin="";var f=new THREE.Texture;f=e.load(d.bkgndImgPath,function(){c.imageLoadCallback&&c.imageLoadCallback()}),f=e.load(d.bkgndImgPath),f.minFilter=THREE.LinearFilter,f.maxFilter=THREE.LinearFilter,b=new THREE.MeshBasicMaterial({map:f,transparent:!0,opacity:0});var g=new THREE.PlaneGeometry(VinylBkgndConfig.BKGND_W,VinylBkgndConfig.BKGND_H,1,1);a=new THREE.Mesh(g,b),c.holder.add(a)},this.show=function(){TweenMax.to(b,.5,{opacity:1,delay:.5})},this.hide=function(){TweenMax.to(b,.5,{opacity:0})},this.update=function(){}},RainbowPage=function(){var a=this,b=[539184,1850635,3160610,1648689,2106168,3612728,3349542,3089937,3221772,1784842,539184],c=[],d=[];this.init=function(e){a.data=e,a.holder=new THREE.Object3D,a.holder.visible=!1;var f=VinylBkgndConfig.BKGND_W/b.length,g=new THREE.PlaneGeometry(f,3*VinylBkgndConfig.BKGND_H,1,1),h=new THREE.Object3D;a.holder.add(h),h.rotation.x=.55,h.position.z=-200;var i=1.5;h.scale.set(i,i,i),$.each(b,function(a,b){var d=new THREE.MeshBasicMaterial({color:b}),e=new THREE.Mesh(g,d);h.add(e),c.push(e),e.position.x=-VinylBkgndConfig.BKGND_W/2+f/2+f*a});var j=new THREE.TextureLoader;j.crossOrigin="Anonymous";for(var k=1;4>k;k++){var l=new THREE.Texture;l=j.load(e["textImgPath"+k]),l.minFilter=THREE.LinearFilter,l.maxFilter=THREE.LinearFilter;var m=new THREE.MeshBasicMaterial({map:l,transparent:!0}),n=new THREE.PlaneGeometry(VinylBkgndConfig.BKGND_W,VinylBkgndConfig.BKGND_H,1,1),o=new THREE.Mesh(n,m);a.holder.add(o),o.position.z=k,d.push(o)}},this.show=function(){var b=.6;TweenMax.delayedCall(b,function(){a.holder.visible=!0}),$.each(c,function(a,c){var d=b+.1*a;TweenMax.killTweensOf(c.position),c.position.y=3*-VinylBkgndConfig.BKGND_H,TweenMax.to(c.position,2,{y:0,ease:Power2.easeOut,delay:d})}),$.each(d,function(a,b){b.material.opacity=1});var e=VinylBkgndConfig.BKGND_H;TweenMax.fromTo(d[0].position,.7,{x:e,y:-e},{x:0,y:0,ease:Power2.easeOut,delay:2}),TweenMax.fromTo(d[1].position,.7,{x:-e,y:-e},{x:0,y:0,ease:Power2.easeOut,delay:2.5}),TweenMax.fromTo(d[2].position,.7,{x:e,y:-e},{x:0,y:0,ease:Power2.easeOut,delay:3}),setTimeout(function(){$("#webgl").on("click",a.onClick),$("#webgl").css("cursor","pointer"),$("#playlist div.page-inner").css("cursor","pointer")},3e3)},this.onClick=function(){$.each(d,function(a,b){TweenMax.to(b.material,.3,{opacity:0})}),$("#webgl").off("click",a.onClick),$("#webgl").css("cursor","default"),console.log("done")},this.hide=function(){a.holder.visible=!1,$("#webgl").off("click",a.onClick),$("#webgl").css("cursor","default")},this.update=function(){}},SplashPage=function(){var a,b,c,d,e,f,g,h,i,j,k,l=this,m=0,n=1e3,o=1e3,p=new THREE.Geometry,q=.0015,r=0,s=1.1,t=[],u=30,v=50,w=new THREE.Geometry;this.init=function(m){l.data=m,l.holder=new THREE.Object3D;var q=new THREE.TextureLoader;q.crossOrigin="Anonymous";var r=new THREE.Texture;r=q.load("https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/img/bkgnd.jpg"),r.minFilter=THREE.LinearFilter,r.maxFilter=THREE.LinearFilter,c=new THREE.MeshBasicMaterial({map:r,transparent:!0,blending:THREE.AdditiveBlending,opacity:0});var s=new THREE.PlaneGeometry(VinylBkgndConfig.BKGND_W,VinylBkgndConfig.BKGND_H,1,1);a=new THREE.Mesh(s,c),l.holder.add(a);var x=new THREE.Texture;x=q.load("https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/img/logo.jpg",function(){l.imageLoadCallback&&l.imageLoadCallback()}),x.minFilter=THREE.LinearFilter,x.maxFilter=THREE.LinearFilter,d=new THREE.MeshBasicMaterial({map:x,transparent:!0,blending:THREE.AdditiveBlending});var y=new THREE.PlaneGeometry(VinylBkgndConfig.BKGND_W,VinylBkgndConfig.BKGND_H,1,1);b=new THREE.Mesh(y,d),l.holder.add(b),b.position.z=1,b.position.y=-VinylBkgndConfig.BKGND_H;var z=new THREE.Texture;z=q.load("https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/img/sub01.png"),z.minFilter=THREE.LinearFilter,z.maxFilter=THREE.LinearFilter,e=new THREE.MeshBasicMaterial({map:z,transparent:!0,blending:THREE.AdditiveBlending,opacity:0});var A=new THREE.PlaneGeometry(586,26,1,1),B=new THREE.Mesh(A,e);l.holder.add(B),B.position.z=1,B.position.y=150;var C=new THREE.Texture;C=q.load("https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/img/sub02.png"),C.minFilter=THREE.LinearFilter,C.maxFilter=THREE.LinearFilter,f=new THREE.MeshBasicMaterial({map:C,transparent:!0,blending:THREE.AdditiveBlending,opacity:0});var D=new THREE.PlaneGeometry(214,26,1,1),E=new THREE.Mesh(D,f);l.holder.add(E),E.position.z=1,E.position.y=-150,h=new THREE.Group,l.holder.add(h),h.position.z=-500;var F=q.load("https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/img/particle.png");i=new THREE.PointsMaterial({map:F,blending:THREE.AdditiveBlending,depthTest:!1,transparent:!0,size:10,opacity:0});for(var G,H=0;n>H;H++)G=ATUtil.randomVector3(o),G.initPos=Math.random(),p.vertices.push(G);g=new THREE.Points(p,i),g.sortParticles=!1,l.holder.add(g),h.add(g);var I=q.load("https://www.vinylcuts.nyc/wp-content/themes/hbo_vinyl/_/js/vinyl-webgl/img/dot.png");j=new THREE.PointsMaterial({size:300,vertexColors:!0,opacity:0,map:I,blending:THREE.AdditiveBlending,depthTest:!1,transparent:!0});for(var J=[],H=0;v>H;H++)G=ATUtil.randomVector3(o),G.initPos=Math.random(),G.theta=Math.random()*Math.PI*2,G.phi=Math.random()*Math.PI*2,w.vertices.push(G),J[H]=new THREE.Color,J[H].setHSL(Math.random(),.8,.5);w.colors=J,k=new THREE.Points(w,j),k.sortParticles=!1,h.add(k);var K=new THREE.PlaneGeometry(5e3,40,1,1);for(H=0;u>H;++H){var L=new THREE.MeshBasicMaterial({opacity:.04,blending:THREE.AdditiveBlending,depthTest:!1,transparent:!0});L.color=new THREE.Color,L.color.setHSL(Math.random(),1,.5);var M=new THREE.Mesh(K,L);M.doubleSided=!0,M.rotation.x=Math.random()*Math.PI,M.rotation.y=Math.random()*Math.PI,M.rotation.z=Math.random()*Math.PI,h.add(M),t.push(M)}},this.show=function(){TweenMax.to(c,1,{opacity:1,delay:.5}),TweenMax.to(d,1,{opacity:1,delay:.5}),TweenMax.fromTo(b.position,1,{x:-VinylBkgndConfig.BKGND_W/2,y:-VinylBkgndConfig.BKGND_H},{x:0,y:0,ease:Power3.easeOut,delay:1}),TweenMax.to(i,2,{opacity:.8,delay:1});for(var a=0;u>a;++a)TweenMax.fromTo(t[a].material,1,{opacity:0},{opacity:.04,delay:2});TweenMax.to(e,.5,{opacity:1,delay:2.5}),TweenMax.to(f,.5,{opacity:1,delay:3}),TweenMax.to(j,1,{opacity:.04,delay:2.5})},this.hide=function(){TweenMax.to(c,.5,{opacity:0}),TweenMax.to(d,.5,{opacity:0}),TweenMax.to(i,.5,{opacity:0}),TweenMax.to(e,.5,{opacity:0}),TweenMax.to(f,.5,{opacity:0}),TweenMax.to(j,.5,{opacity:0});for(var a=0;u>a;++a)TweenMax.to(t[a].material,.5,{opacity:0});$("#webgl").off("click",l.hide),$("#webgl").css("cursor","default")},this.update=function(){var a=.004;r+=q,h.rotation.y+=a,h.rotation.z+=a/2,m+=s}},VinylBkgndConfig={BKGND_W:1440,BKGND_H:900,HALF_FRAME_RATE:!0},noise=new ImprovedNoise,VinylWebGL=function(){function a(){TweenLite.defaultOverwrite="all",t=window.location.href.indexOf("devmode")>-1,i=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1,1e4),i.position.z=1e3,j=new THREE.Scene,j.fog=new THREE.Fog(0,0,2e3),n=new THREE.Object3D,n.position.z=415,j.add(n),k=new THREE.WebGLRenderer,k.setPixelRatio(window.devicePixelRatio),k.setSize(window.innerWidth,window.innerHeight),$("#webgl").append(k.domElement),l=new Stats,l.domElement.style.position="absolute",l.domElement.style.top="0px",l.domElement.style.right="0px",t&&$("#webgl").append(l.domElement),d(),$(window).resize(f),f(),b(pageData)}function b(a){$.each(a,function(a,b){var c;"none"===b.pageType?q.push(null):("standard"===b.pageType?c=new Page:"gallery"===b.pageType?c=new GalleryPage:"rainbow"===b.pageType?c=new RainbowPage:"splash"===b.pageType&&(c=new SplashPage),c.init(b),n.add(c.holder),q.push(c))}),TweenMax.fromTo(o.bcPass.uniforms.brightness,1,{value:-1},{value:0}),e(),q[q.length-1].imageLoadCallback=function(){console.log("loaded!"),$("div#loader-curtain").hide()}}function c(a){q[r]&&q[r].hide(),q[a]&&q[a].show(),r=a}function d(){o.renderPass=new THREE.RenderPass(j,i),o.badTVPass=new THREE.ShaderPass(THREE.BadTVShader),o.rgbPass=new THREE.ShaderPass(THREE.RGBShiftShader),o.filmPass=new THREE.ShaderPass(THREE.FilmShader),o.bcPass=new THREE.ShaderPass(THREE.BrightnessContrastShader),m=new THREE.EffectComposer(k),m.addPass(o.renderPass),m.addPass(o.badTVPass),m.addPass(o.rgbPass),m.addPass(o.filmPass),m.addPass(o.bcPass),o.bcPass.renderToScreen=!0,o.badTVPass.uniforms.distortion.value=10.3,o.badTVPass.uniforms.distortion2.value=10.1,o.badTVPass.uniforms.speed.value=1.5,o.rgbPass.uniforms.angle.value=0,o.rgbPass.uniforms.amount.value=.002,o.filmPass.uniforms.sIntensity.value=.4,o.filmPass.uniforms.nIntensity.value=.6,o.filmPass.uniforms.grayscale.value=0}function e(){if(requestAnimationFrame(e),v=!v,(!VinylBkgndConfig.HALF_FRAME_RATE||!v)&&u){l.update(),m.render(.1),p+=.01,o.badTVPass.uniforms.time.value=p,o.filmPass.uniforms.time.value=p;var a=noise.noise(p,0,0);o.rgbPass.uniforms.angle.value=2*Math.PI*a,a=15*Math.pow(a,3),o.badTVPass.uniforms.distortion.value=a,o.badTVPass.uniforms.distortion2.value=a,q[0].update()}}function f(){var a=window.innerWidth,b=window.innerHeight;i.aspect=a/b,i.updateProjectionMatrix(),k.setSize(a,b),m.setSize(a,b);var c;c=i.aspect<s?1:i.aspect/s,n.scale.set(c,c,c),o.filmPass.uniforms.sCount.value=1.5*window.innerHeight}function g(){$("#webgl").css("display","block"),u=!0}function h(){$("#webgl").css("display","none"),u=!1}var i,j,k,l,m,n,o={},p=0,q=[],r=-1,s=VinylBkgndConfig.BKGND_W/VinylBkgndConfig.BKGND_H,t=!1,u=!0,v=!0;return{init:a,showPage:c,show:g,hide:h}}();


</script>

<body class="page page-id-1048 page-child parent-pageid-1044 page-template page-template-template-episode-splash page-template-template-episode-splash-php splash" data-color="#ffffff" data-issue="Vinyl " id="vinyl-cuts" style="background-color:#000;">



<script type="text/javascript" src="https://www.hbo.com/html/js/s_code_onsite.js"></script>
<script type="text/javascript" src="https://www.hbo.com/html/js/offsite-tracklinks.js"></script>

<!-- analytics -->
<script type="text/javascript">
var body = document.getElementsByTagName('body')[0];
var device = new MobileDetect(window.navigator.userAgent);
var omniture = null;
var deviceType = 'desktop';
deviceType = ( device.is('iPad') ) ? 'ipad' : deviceType;
deviceType = ( device.is('iPhone') ) ? 'iphone' : deviceType;
deviceType = ( device.is('AndroidOS') ) ? 'android' : deviceType;
deviceType = ( device.is('Kindle') ) ? 'kindle' : deviceType;
var deviceMob = ( device.match('iphone|ipad|android|kindle') ) ? 'yes' : 'no';

var config = {
eVar10: 'Vinyl',
prop10: 'Vinyl',
eVar30: deviceMob,
prop30: deviceMob,
eVar30: deviceType,
prop30: deviceType,
eVar50: body.dataset.issue,
prop50: body.dataset.issue,
pageName: null,
eVar1: null,
hier1: null

};

var omnitureSettings = config;

</script>

<!-- analytics -->


<div id="webgl"></div>

<script type="text/javascript">

var pageData = [{"title":"splash","pageType":"splash"}];

</script>

<script type="text/javascript">/* <![CDATA[ */(function(d,s,a,i,j,r,l,m,t){try{l=d.getElementsByTagName('a');t=d.createElement('textarea');for(i=0;l.length-i;i++){try{a=l[i].href;s=a.indexOf('/cdn-cgi/l/email-protection');m=a.length;if(a&&s>-1&&m>28){j=28+s;s='';if(j<m){r='0x'+a.substr(j,2)|0;for(j+=2;j<m&&a.charAt(j)!='X';j+=2)s+='%'+('0'+('0x'+a.substr(j,2)^r).toString(16)).slice(-2);j++;s=decodeURIComponent(s)+a.substr(j,m-j)}t.innerHTML=s.replace(/</g,'<').replace(/>/g,'>');l[i].href='mailto:'+t.value}}catch(e){}}}catch(e){}})(document);/* ]]> */</script></body>
</html>

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By ricardonews
      Olá pessoal, fiz 2 formularios  de login em jquery e ajax, um eu vi na internert o modelo então fiz umas adaptações e funcionou com meu banco de dados. porem o outro que fiz baseado nele não funcionou. vou postar aqui pra voces o funcionando e o não funcionando, alguém pode me dar uma ajuda?, dizer que erro é esse? ele simplesmente não loga e não aparece erros no console.
      <!doctype html> <html> <?php require_once"config.php"; ?> <head> <title>APRENDIZ DE JS</title> <link href="style.css" rel="stylesheet" type="text/css"> <script src="jquery-3.2.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#but_submit").click(function(){ var username = $("#meu_nome").val().trim(); var password = $("#minha_senha").val().trim(); if( username != "" && password != "" ){ $.ajax({ url:'pesquisar.php', type:'post', data:{username:username,password:password}, success:function(response){ var msg = ""; if(response == 1){ window.location = "home.php"; }else{ msg = "Invalid username and password!"; } $("#message").html(msg); } }); } }); }); </script> </head> <body> <div class="container"> <div id="div_login"> <h1>Login</h1> <div id="message"></div> <div> <input type="text" class="textbox" id="meu_nome" name="meu_nome" placeholder="Username" /> </div> <div> <input type="password" class="textbox" id="minha_senha" name="minha_senha" placeholder="Password"/> </div> <div> <input type="button" value="logar" name="but_submit" id="but_submit" /> </div> </div> </div> </body> </html> /* Container */ .container{ width:40%; margin:0 auto; } /* Login */ #div_login{ border: 1px solid gray; border-radius: 3px; width: 470px; height: 270px; box-shadow: 0px 2px 2px 0px gray; margin: 0 auto; } #div_login h1{ margin-top: 0px; font-weight: normal; padding: 10px; background-color: cornflowerblue; color: white; font-family: sans-serif; } #div_login div{ clear: both; margin-top: 10px; padding: 5px; } #div_login .textbox{ width: 96%; padding: 7px; } #div_login input[type=submit]{ padding: 7px; width: 100px; background-color: lightseagreen; border: 0px; color: white; } #message{ width:100%; text-align:center; color:red; } /* media */ @media screen and (max-width:720px){ .container{ width: 100%; } #div_login{ width: 99%; } } <?php require_once "config.php"; // AQUI É O PESQUISAR PHP $uname = mysqli_real_escape_string($con,$_POST['username']); $password = mysqli_real_escape_string($con,$_POST['password']); if ($uname != "" && $password != ""){ $sql_query = "SELECT count(*) as cntUser FROM usuarios WHERE username='".$uname."' and password='".$password."'"; $result = mysqli_query($con,$sql_query); $row = mysqli_fetch_array($result); $count = $row['cntUser']; if($count > 0){ $_SESSION['uname'] = $uname; echo 1; }else{ echo 0; } } <?php require_once "config.php"; // AQUI É A HOME.PHP // Check user login or not if(!isset($_SESSION['uname'])){ header('Location: index.php'); } // logout if(isset($_POST['but_logout'])){ session_destroy(); header('Location: index.php'); } ?> <!doctype html> <html> <head> <title>SEJA BEM VINDO!</title> </head> <body> <h1>PÁGINA INICIAL</h1> <form method='post' action=""> <input type="submit" value="SAIR" name="but_logout"> </form> </body> </html> <?php // ESSE AQUI É A CONFIG.PHP session_start(); $host = "localhost"; /* Host name */ $user = "root"; /* User */ $password = ""; /* Password */ $dbname = "login2"; /* Database name */ $con = mysqli_connect($host, $user, $password,$dbname); // Check connection if (!$con) { die("Connection failed: " . mysqli_connect_error()); } Então pessoal, até aqui funciona normal .
      agora a linha abaixo é oque não funciona e eu vou postar só a index e o css porque repete o de cima.
      se alguém poder me ajudar eu fico grato. desde já muito obrigado
      <html> <?php require_once"config.php"; ?> <head> <title>Formulario de login </title> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script src="jquery-3.2.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#but_submit").click(function(){ var username = $("#meu_nome").val().trim(); var password = $("#minha_senha").val().trim(); if( username != "" && password != "" ){ $.ajax({ url:'pesquisar.php', type:'post', data:{username:username,password:password}, success:function(response){ var msg = ""; if(response == 1){ window.location = "home.php"; }else{ msg = "Invalid username and password!"; } $("#message").html(msg); } }); } }); }); </script> </head> <body> <form id="formulario" method="post"> <fieldset> <h2>Configuracoes da conta</h2> <h3>Area de login </h3> <input type="text" id="meu_nome"name="meu_nome" placeholder="username" /> <input type="password" id="minha_senha " name="minha_senha" placeholder="digite sua senha" /> <input type="submit" class="next acao" value="Logar" /> </fieldset> </body> </html> agora é o css
      *{margin:0; padding:0;} html{ height:100%; background: linear-gradient(rgba(38, 128, 101, 0.9), rgba(52, 177, 140, 0.9)); } .erros, .ok { width:390px; padding:5px; background:rgba(238, 249, 113, 0.9); margin: 20px auto 0 auto; border: 1px solid rgba(222,239,10,0.9); border-radius: 4px; color: #333; } .ok{background: rgba(155,222,143,0.9);border-color: rgba(68, 171, 50, 0.9);color:white;} body{ font-family: "Trebuchet MS", tahoma, arial; } #formulario{ width:500px; margin:40px auto; text-align:center; position:relative; } #formulario fieldset{ background:white; border:0 none; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; box-shadow:0 0 15px 1px rgba(0,0,0, 0.4); padding:20px 30px; box-sizing: border-box; width:80%; margin:0 10%; position:absolute; } #formulario input, #formulario textarea{ padding:10px; border:1px solid rgba(38, 128, 101, 0.9); border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; outline:none; box-sizing: border-box; width:100%; font:14px "Trebuchet MS", tahoma, arial; color:#090; margin-bottom:10px; } #formulario .acao{ width:100px; background:rgba(38, 128, 101, 0.9); color:white; text-transform:uppercase; font-weight:bold; padding:12px 0; float:left; margin-right:5%; } #formulario .acao:hover{background:rgba(52, 177, 140, 0.9); cursor:pointer;}  
    • By ricardonews
      Olá pessoal, fiz um formulario de cadastro usando o jquery ,ajax com o json. só que agora eu estou querendo logar  no banco, fiz todo o procedimento normal que se faz para site em php, mas não consegui nada,  eu tenho algumas imagem aqui  vou colocar.
      Queria logar, eu coloquei a index  sem o php porque tentei com php e js mas nao funcionou , alguem pode me ajudar ?
      desde já obrigado.




    • By Mensageyro
      Olá pessoal, tenho um script para abrir um menu, preciso colocar um efeito legal quando o menu descer segue a imagem do script:
       
       

    • By tiagosp
      Olá, tenho uma duvida a respeito da mesclagem entre Jquery e Js regular.
      Sei que Jquery é um JS simplificado, porém gostaria de saber se existe alguma regra quanto a utilização de ambos no mesmo script, por exemplo:
      var nome = $("$nome").text(); alert(nome); Posso utilizar ambos sem problemas, ou há alguma exceção, ou ainda uma regra de fato. 
    • By edupoli
      Amigos preciso de uma ajuda
       
      Em um sistema, tenho uma TABELA HTML que é populada com dados do BD através de consultas XMLHttpRequest. exemplificando o cenário tenho:
      Uma pagina chamada ListarExames.php  e outra pagina Busca.php onde no arquivo busca.php está toda a logica com as consultas SQL e o resultado da busca é carregado em uma <div> na pagina ListarExames.php. tudo esta funcionando corretamente, entretanto como algumas vezes como são retornados Muitos resultados na listagem, eu gostaria de fazer com que a tabela que é carregada dinamicamente na <div> virasse um DataTable e não uma tabela simples HTML. 
       
      Abaixo segue código da função que dispara a busca
      [javascript]
      function buscarExames(inicio,pagina){
          var numCamposForm=document.filtros.length;
          var array_campos = "";
          for (i=0;i<numCamposForm;i++){
              array_campos=array_campos+document.filtros.id+"="+document.filtros.value.toUpperCase()+"&";
          }
          var valor=array_campos.substring(0,(array_campos.length - 1));
          if(valor == '' || valor == ' ')
              exit;
          if(window.XMLHttpRequest) {
                 req = new XMLHttpRequest();
          }
          else if(window.ActiveXObject){
                 req = new ActiveXObject("Microsoft.XMLHTTP");
          }
         var url = "busca.php?"+valor+"&inicio="+inicio+"&pagina="+pagina;
          req.open("Get", url, true);
         req.onreadystatechange = function() {
              if(req.readyState == 1) {
                  document.getElementById('resultado').innerHTML = 'Buscando Exames...';
              }
              if(req.readyState == 4 && req.status == 200) {
                   var resposta = req.responseText;
                   document.getElementById('resultado').innerHTML = resposta;
              }
          }
          req.send(null);
      }
        [/javascript]
      na pagina ListarExames.php temos

      <div id="resultado"></div>  
      a tabela é montada no busca.php e possui um id="dcm"
       
      echo'<table id="dcm" class="table display data-results table-condensed table-sm table-hover" cellspacing="0" style="background-color: #ffffff">';         echo'<thead>';         echo'<tr>';           echo'<th>Nº PACIENTE</th>';              echo'<th>NOME DO PACIENTE</th>';           echo'<th>SEXO</th>';           echo'<th>DATA DO EXAME</th>';           echo'<th>TIPO DE EXAME</th>';           echo'<th>MODALIDADE</th>';           echo'<th>AÇÃO</th>';         echo'</tr>';       echo'</thead>'; while($linha = pg_fetch_array($sql)) {         $std_status=$linha['study_status'];         $std_data=$linha['study_date'];         $std_hora=$linha['study_time'];         $pat_name=str_replace('^',' ',$linha['pat_name']);         $pat_sex=$linha['pat_sex'];         $pat_id=$linha['pat_id'];         $std_id=$linha['study_id'];         $std_accession=$linha['accession_no'];         $std_desc=$linha['study_desc'];         $std_mod=$linha['mods_in_study'];           echo'<tbody>';               echo "<td>$pat_id</td>";             echo "<td>$pat_name</td>";             echo "<td>$pat_sex</td>";             echo "<td>$std_data - $std_hora </td>";             echo "<td>$std_desc </td>";             echo "<td>$std_mod</td>"; echo'</tbody>';   Desta forma quando eu chamo a função para transformar  a tabela carregada na pagina ListarExames.php em um DataTable
        [javascript]
      <script type="text/javascript">
        $(document).ready(function () {
      $('#resultado').DataTable();
      });
      </script>
      [/javascript]
       
      Da erro porque o elemento "resultado" é uma <div> e não uma tabela,  conforme mensagem:
      DataTables warning: Non-table node initialisation (DIV). For more information about this error, please see http://datatables.net/tn/2
       
      e se eu colocar na pagina ListarExames.php o id="dcm" que é o ID da tabela que é gerada dinamicamente na outra pagina busca.php não da certo.
        [javascript]
      <script type="text/javascript">
        $(document).ready(function () {
      $('#dcm').DataTable();
      });
      </script>
          [/javascript]
      Ai o que fiz foi ao inves de um elemento <div> eu coloquei um elemento <table> com o id="resultado"  desta forma:

      <table id="resultado" class="table display table-condensed data-results table-hover" cellspacing="0" style="background-color: #ffffff">     <thead><tr><th>Nº PACIENTE</th><th>NOME DO PACIENTE</th><th>SEXO</th><th>DATA DO EXAME</th><th>TIPO DE EXAME</th><th>MODALIDADE</th><th>AÇÃO</th></tr></thead>     <tbody><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tbody>   </table>  
      A principio deu certo carregou todos os dados, apresentou tambem os elementos DataTable  como Search a paginação etc.... mais os elementos não funcionam apenas são apresentados, entendi ? por exemplo se digitar alguma coisa no search do datatble não acontece nada, se selecionar apenas 10 resultados por pagina também nao acontece nada, enfim o datatable nao funciona.
       
      É possivel com o jquery selecionar um elemento de outra pagina ? porque pensei que se der para NA PAGINA ListarExames.php que é onde é carregada a tabela selecionar o elemento id="dcm" que é a tabela que é montada na pagina busca.php  talves daria certo, vi que tem uma função LOAD do Jquery que faria isso mais não consegui entender e aplicar no meu projeto
       
      Não sei se ficou claro o meu problema, conto com a ajuda de voces pois ja se esgotaram minhas tentativas.
       
      Muito obrigado 
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.