Ir para conteúdo
LoiroCroft

Dicas de códigos para seu guia

Recommended Posts

INTRODUÇÃO

 

Como a maioria deve saber, o myPSt utilizava o BBCode. Mas recentemente, o myPSt passou por uma reformulação e agora utiliza o HTML. Com isso novas funcionalidades se tornaram possíveis, pois combinando o HTML com CSS, Javascript, entre outros, as possibilidades são infinitas.

 

Neste tópico serão disponibilizados alguns códigos que utilizo em meus guias e também códigos compartilhados por outros usuários, para que você possa inserir em seus guias.

Alguns códigos são apenas estéticos e bem extensos, mas não pesam o carregamento da página.

 

Caso você fique com alguma dúvida, tenha uma crítica construtiva ou sugestão, sinta-se à vontade para comentar.

 

 Head Image com duas imagens Índice 

 

Ao mover o cursor do mouse sobre a Head Image, a imagem padrão é alterada por uma imagem alternativa (No smartphone você precisará pressionar o dedo para que elas sejam alteradas).

 

spacer.png
spacer.png

Head Image que criei para o guia do Call of Duty: Modern Warfare 2 Campaign Remastered

 

Para utilizar este tipo de efeito, substitua o código padrão da Head Image do seu guia, pelo código disponibilizado abaixo, colando-o diretamente no Código-Fonte:

 


<div class="cont">
	<div class="caixa">
		<div align="center" class="imgBx" style="width:100%">
			<img alt="spacer.png" data-loaded="true" data-src="URL DA SEGUNDA IMAGEM AQUI" src="https://forum.mypst.com.br/applications/core/interface/js/spacer.png" style="height: auto;">
		</div>

		<div align="center" class="img2Bx" style="width:100%">
			<img alt="spacer.png" data-loaded="true" data-src="URL DA PRIMEIRA IMAGEM AQUI" src="https://forum.mypst.com.br/applications/core/interface/js/spacer.png" style="height: auto;">
		</div>
	</div>
</div>
<style type="text/css">
.cont
    {
        position: relative;
        display: flex;
        align-items: center;
        flex-direction: column;
        padding: 5px 0;
    }
    .cont .caixa
    {
        position: relative;
        width: auto;
        height: auto;
        box-shadow: 0px 0px 0px black;
        transform-style: preserve-3d;
    }
    .cont .caixa .imgBx
    {
        position: absolute;
        transform: translateZ(0px) scaleY(1);
    }
    .cont .caixa .img2Bx
    {
        position: relative;
    }
    .cont .caixa:hover .img2Bx
    {
        transform: translateZ(0px) scaleY(0);
    }</style>

 

Mas para que o efeito funcione, você precisará substituir os trechos URL DA SEGUNDA IMAGEM AQUI e URL DA PRIMEIRA IMAGEM AQUI, pelas URLs de duas imagens com o tamanho de 600 x 300 pixels.

 

Veja em spoiler abaixo, as imagens que utilizei:

 

Spoiler

eGeSXur.png

Segunda imagem (aparecerá ao passar o cursor do mouse) 600x300

VxcA9C9.png

Primeira imagem (mostrada quando o cursor do mouse não estiver sobre a Head Image) 600x300

 

 Head Image com efeito 3D Índice 

 

Para ver a mágica acontecer, mova o cursor do mouse sobre a imagem ou movimente seu smartphone.

 

j0BYvIW.png
QyZCYFs.png

Head Image que criei para o guia do The Last of Us Part II

 

Para utilizar este tipo de efeito, substitua o código padrão da Head Image do seu guia, pelo código disponibilizado abaixo, colando-o diretamente no Código-Fonte:

 

<div class="container">
    <div class="box">
        <div align="center" class="imgBx" style="width:100%">
            <img alt="" data-loaded="true" data-src="URL DA SUA IMAGEM AQUI" src="https://forum.mypst.com.br/applications/core/interface/js/spacer.png" style="height: auto;">
        </div>

        <div align="center" class="img2Bx" style="width:100%">
            <img alt="" data-loaded="true" data-src="URL DO LOGO PNG AQUI" src="https://forum.mypst.com.br/applications/core/interface/js/spacer.png" style="height: auto;">
        </div>
    </div>
</div>
<script type="text/javascript">
var VanillaTilt = (function () {
'use strict';

/**
 * Created by Sergiu Șandor (micku7zu) on 1/27/2017.
 * Original idea: https://github.com/gijsroge/tilt.js
 * MIT License.
 * Version 1.7.0
 */

class VanillaTilt {
  constructor(element, settings = {}) {
    if (!(element instanceof Node)) {
      throw ("Can't initialize VanillaTilt because " + element + " is not a Node.");
    }

    this.width = null;
    this.height = null;
    this.clientWidth = null;
    this.clientHeight = null;
    this.left = null;
    this.top = null;

    // for Gyroscope sampling
    this.gammazero = null;
    this.betazero = null;
    this.lastgammazero = null;
    this.lastbetazero = null;

    this.transitionTimeout = null;
    this.updateCall = null;
    this.event = null;

    this.updateBind = this.update.bind(this);
    this.resetBind = this.reset.bind(this);

    this.element = element;
    this.settings = this.extendSettings(settings);

    this.reverse = this.settings.reverse ? -1 : 1;
    this.glare = VanillaTilt.isSettingTrue(this.settings.glare);
    this.glarePrerender = VanillaTilt.isSettingTrue(this.settings["glare-prerender"]);
    this.fullPageListening = VanillaTilt.isSettingTrue(this.settings["full-page-listening"]);
    this.gyroscope = VanillaTilt.isSettingTrue(this.settings.gyroscope);
    this.gyroscopeSamples = this.settings.gyroscopeSamples;

    this.elementListener = this.getElementListener();

    if (this.glare) {
      this.prepareGlare();
    }

    if (this.fullPageListening) {
      this.updateClientSize();
    }

    this.addEventListeners();
    this.updateInitialPosition();
  }

  static isSettingTrue(setting) {
    return setting === "" || setting === true || setting === 1;
  }

  /**
   * Method returns element what will be listen mouse events
   * @return {Node}
   */
  getElementListener() {
    if (this.fullPageListening) {
      return window.document;
    }

    if (typeof this.settings["mouse-event-element"] === "string") {
      const mouseEventElement = document.querySelector(this.settings["mouse-event-element"]);

      if (mouseEventElement) {
        return mouseEventElement;
      }
    }

    if (this.settings["mouse-event-element"] instanceof Node) {
      return this.settings["mouse-event-element"];
    }

    return this.element;
  }

  /**
   * Method set listen methods for this.elementListener
   * @return {Node}
   */
  addEventListeners() {
    this.onMouseEnterBind = this.onMouseEnter.bind(this);
    this.onMouseMoveBind = this.onMouseMove.bind(this);
    this.onMouseLeaveBind = this.onMouseLeave.bind(this);
    this.onWindowResizeBind = this.onWindowResize.bind(this);
    this.onDeviceOrientationBind = this.onDeviceOrientation.bind(this);

    this.elementListener.addEventListener("mouseenter", this.onMouseEnterBind);
    this.elementListener.addEventListener("mouseleave", this.onMouseLeaveBind);
    this.elementListener.addEventListener("mousemove", this.onMouseMoveBind);

    if (this.glare || this.fullPageListening) {
      window.addEventListener("resize", this.onWindowResizeBind);
    }

    if (this.gyroscope) {
      window.addEventListener("deviceorientation", this.onDeviceOrientationBind);
    }
  }

  /**
   * Method remove event listeners from current this.elementListener
   */
  removeEventListeners() {
    this.elementListener.removeEventListener("mouseenter", this.onMouseEnterBind);
    this.elementListener.removeEventListener("mouseleave", this.onMouseLeaveBind);
    this.elementListener.removeEventListener("mousemove", this.onMouseMoveBind);

    if (this.gyroscope) {
      window.removeEventListener("deviceorientation", this.onDeviceOrientationBind);
    }

    if (this.glare || this.fullPageListening) {
      window.removeEventListener("resize", this.onWindowResizeBind);
    }
  }

  destroy() {
    clearTimeout(this.transitionTimeout);
    if (this.updateCall !== null) {
      cancelAnimationFrame(this.updateCall);
    }

    this.reset();

    this.removeEventListeners();
    this.element.vanillaTilt = null;
    delete this.element.vanillaTilt;

    this.element = null;
  }

  onDeviceOrientation(event) {
    if (event.gamma === null || event.beta === null) {
      return;
    }

    this.updateElementPosition();

    if (this.gyroscopeSamples > 0) {
      this.lastgammazero = this.gammazero;
      this.lastbetazero = this.betazero;

      if (this.gammazero === null) {
        this.gammazero = event.gamma;
        this.betazero = event.beta;
      } else {
        this.gammazero = (event.gamma + this.lastgammazero) / 2;
        this.betazero = (event.beta + this.lastbetazero) / 2;
      }

      this.gyroscopeSamples -= 1;
    }

    const totalAngleX = this.settings.gyroscopeMaxAngleX - this.settings.gyroscopeMinAngleX;
    const totalAngleY = this.settings.gyroscopeMaxAngleY - this.settings.gyroscopeMinAngleY;

    const degreesPerPixelX = totalAngleX / this.width;
    const degreesPerPixelY = totalAngleY / this.height;

    const angleX = event.gamma - (this.settings.gyroscopeMinAngleX + this.gammazero);
    const angleY = event.beta - (this.settings.gyroscopeMinAngleY + this.betazero);

    const posX = angleX / degreesPerPixelX;
    const posY = angleY / degreesPerPixelY;

    if (this.updateCall !== null) {
      cancelAnimationFrame(this.updateCall);
    }

    this.event = {
      clientX: posX + this.left,
      clientY: posY + this.top,
    };

    this.updateCall = requestAnimationFrame(this.updateBind);
  }

  onMouseEnter() {
    this.updateElementPosition();
    this.element.style.willChange = "transform";
    this.setTransition();
  }

  onMouseMove(event) {
    if (this.updateCall !== null) {
      cancelAnimationFrame(this.updateCall);
    }

    this.event = event;
    this.updateCall = requestAnimationFrame(this.updateBind);
  }

  onMouseLeave() {
    this.setTransition();

    if (this.settings.reset) {
      requestAnimationFrame(this.resetBind);
    }
  }

  reset() {
    this.event = {
      clientX: this.left + this.width / 2,
      clientY: this.top + this.height / 2
    };

    if (this.element && this.element.style) {
      this.element.style.transform = `perspective(${this.settings.perspective}px) ` +
        `rotateX(0deg) ` +
        `rotateY(0deg) ` +
        `scale3d(1, 1, 1)`;
    }

    this.resetGlare();
  }

  resetGlare() {
    if (this.glare) {
      this.glareElement.style.transform = "rotate(180deg) translate(-50%, -50%)";
      this.glareElement.style.opacity = "0";
    }
  }

  updateInitialPosition() {
    if (this.settings.startX === 0 && this.settings.startY === 0) {
      return;
    }

    this.onMouseEnter();

    if (this.fullPageListening) {
      this.event = {
        clientX: (this.settings.startX + this.settings.max) / (2 * this.settings.max) * this.clientWidth,
        clientY: (this.settings.startY + this.settings.max) / (2 * this.settings.max) * this.clientHeight
      };
    } else {
      this.event = {
        clientX: this.left + ((this.settings.startX + this.settings.max) / (2 * this.settings.max) * this.width),
        clientY: this.top + ((this.settings.startY + this.settings.max) / (2 * this.settings.max) * this.height)
      };
    }


    let backupScale = this.settings.scale;
    this.settings.scale = 1;
    this.update();
    this.settings.scale = backupScale;
    this.resetGlare();
  }

  getValues() {
    let x, y;

    if (this.fullPageListening) {
      x = this.event.clientX / this.clientWidth;
      y = this.event.clientY / this.clientHeight;
    } else {
      x = (this.event.clientX - this.left) / this.width;
      y = (this.event.clientY - this.top) / this.height;
    }

    x = Math.min(Math.max(x, 0), 1);
    y = Math.min(Math.max(y, 0), 1);

    let tiltX = (this.reverse * (this.settings.max - x * this.settings.max * 2)).toFixed(2);
    let tiltY = (this.reverse * (y * this.settings.max * 2 - this.settings.max)).toFixed(2);
    let angle = Math.atan2(this.event.clientX - (this.left + this.width / 2), -(this.event.clientY - (this.top + this.height / 2))) * (180 / Math.PI);

    return {
      tiltX: tiltX,
      tiltY: tiltY,
      percentageX: x * 100,
      percentageY: y * 100,
      angle: angle
    };
  }

  updateElementPosition() {
    let rect = this.element.getBoundingClientRect();

    this.width = this.element.offsetWidth;
    this.height = this.element.offsetHeight;
    this.left = rect.left;
    this.top = rect.top;
  }

  update() {
    let values = this.getValues();

    this.element.style.transform = "perspective(" + this.settings.perspective + "px) " +
      "rotateX(" + (this.settings.axis === "x" ? 0 : values.tiltY) + "deg) " +
      "rotateY(" + (this.settings.axis === "y" ? 0 : values.tiltX) + "deg) " +
      "scale3d(" + this.settings.scale + ", " + this.settings.scale + ", " + this.settings.scale + ")";

    if (this.glare) {
      this.glareElement.style.transform = `rotate(${values.angle}deg) translate(-50%, -50%)`;
      this.glareElement.style.opacity = `${values.percentageY * this.settings["max-glare"] / 100}`;
    }

    this.element.dispatchEvent(new CustomEvent("tiltChange", {
      "detail": values
    }));

    this.updateCall = null;
  }

  /**
   * Appends the glare element (if glarePrerender equals false)
   * and sets the default style
   */
  prepareGlare() {
    // If option pre-render is enabled we assume all html/css is present for an optimal glare effect.
    if (!this.glarePrerender) {
      // Create glare element
      const jsTiltGlare = document.createElement("div");
      jsTiltGlare.classList.add("js-tilt-glare");

      const jsTiltGlareInner = document.createElement("div");
      jsTiltGlareInner.classList.add("js-tilt-glare-inner");

      jsTiltGlare.appendChild(jsTiltGlareInner);
      this.element.appendChild(jsTiltGlare);
    }

    this.glareElementWrapper = this.element.querySelector(".js-tilt-glare");
    this.glareElement = this.element.querySelector(".js-tilt-glare-inner");

    if (this.glarePrerender) {
      return;
    }

    Object.assign(this.glareElementWrapper.style, {
      "position": "absolute",
      "top": "0",
      "left": "0",
      "width": "100%",
      "height": "100%",
      "overflow": "hidden",
      "pointer-events": "none"
    });

    Object.assign(this.glareElement.style, {
      "position": "absolute",
      "top": "50%",
      "left": "50%",
      "pointer-events": "none",
      "background-image": `linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)`,
      "width": `${this.element.offsetWidth * 2}px`,
      "height": `${this.element.offsetWidth * 2}px`,
      "transform": "rotate(180deg) translate(-50%, -50%)",
      "transform-origin": "0% 0%",
      "opacity": "0",
    });
  }

  updateGlareSize() {
    if (this.glare) {
      Object.assign(this.glareElement.style, {
        "width": `${this.element.offsetWidth * 2}`,
        "height": `${this.element.offsetWidth * 2}`,
      });
    }
  }

  updateClientSize() {
    this.clientWidth = window.innerWidth
      || document.documentElement.clientWidth
      || document.body.clientWidth;

    this.clientHeight = window.innerHeight
      || document.documentElement.clientHeight
      || document.body.clientHeight;
  }

  onWindowResize() {
    this.updateGlareSize();
    this.updateClientSize();
  }

  setTransition() {
    clearTimeout(this.transitionTimeout);
    this.element.style.transition = this.settings.speed + "ms " + this.settings.easing;
    if (this.glare) this.glareElement.style.transition = `opacity ${this.settings.speed}ms ${this.settings.easing}`;

    this.transitionTimeout = setTimeout(() => {
      this.element.style.transition = "";
      if (this.glare) {
        this.glareElement.style.transition = "";
      }
    }, this.settings.speed);

  }

  /**
   * Method return patched settings of instance
   * @param {boolean} settings.reverse - reverse the tilt direction
   * @param {number} settings.max - max tilt rotation (degrees)
   * @param {startX} settings.startX - the starting tilt on the X axis, in degrees. Default: 0
   * @param {startY} settings.startY - the starting tilt on the Y axis, in degrees. Default: 0
   * @param {number} settings.perspective - Transform perspective, the lower the more extreme the tilt gets
   * @param {string} settings.easing - Easing on enter/exit
   * @param {number} settings.scale - 2 = 200%, 1.5 = 150%, etc..
   * @param {number} settings.speed - Speed of the enter/exit transition
   * @param {boolean} settings.transition - Set a transition on enter/exit
   * @param {string|null} settings.axis - What axis should be disabled. Can be X or Y
   * @param {boolean} settings.glare - What axis should be disabled. Can be X or Y
   * @param {number} settings.max-glare - the maximum "glare" opacity (1 = 100%, 0.5 = 50%)
   * @param {boolean} settings.glare-prerender - false = VanillaTilt creates the glare elements for you, otherwise
   * @param {boolean} settings.full-page-listening - If true, parallax effect will listen to mouse move events on the whole document, not only the selected element
   * @param {string|object} settings.mouse-event-element - String selector or link to HTML-element what will be listen mouse events
   * @param {boolean} settings.reset - false = If the tilt effect has to be reset on exit
   * @param {gyroscope} settings.gyroscope - Enable tilting by deviceorientation events
   * @param {gyroscopeSensitivity} settings.gyroscopeSensitivity - Between 0 and 1 - The angle at which max tilt position is reached. 1 = 90deg, 0.5 = 45deg, etc..
   * @param {gyroscopeSamples} settings.gyroscopeSamples - How many gyroscope moves to decide the starting position.
   */
  extendSettings(settings) {
    let defaultSettings = {
      reverse: false,
      max: 15,
      startX: 0,
      startY: 0,
      perspective: 2000,
      easing: "cubic-bezier(.03,.98,.52,.99)",
      scale: 1,
      speed: 300,
      transition: true,
      axis: null,
      glare: false,
      "max-glare": 1,
      "glare-prerender": false,
      "full-page-listening": false,
      "mouse-event-element": null,
      reset: true,
      gyroscope: true,
      gyroscopeMinAngleX: -45,
      gyroscopeMaxAngleX: 45,
      gyroscopeMinAngleY: -45,
      gyroscopeMaxAngleY: 45,
      gyroscopeSamples: 10
    };

    let newSettings = {};
    for (var property in defaultSettings) {
      if (property in settings) {
        newSettings[property] = settings[property];
      } else if (this.element.hasAttribute("data-tilt-" + property)) {
        let attribute = this.element.getAttribute("data-tilt-" + property);
        try {
          newSettings[property] = JSON.parse(attribute);
        } catch (e) {
          newSettings[property] = attribute;
        }

      } else {
        newSettings[property] = defaultSettings[property];
      }
    }

    return newSettings;
  }

  static init(elements, settings) {
    if (elements instanceof Node) {
      elements = [elements];
    }

    if (elements instanceof NodeList) {
      elements = [].slice.call(elements);
    }

    if (!(elements instanceof Array)) {
      return;
    }

    elements.forEach((element) => {
      if (!("vanillaTilt" in element)) {
        element.vanillaTilt = new VanillaTilt(element, settings);
      }
    });
  }
}

if (typeof document !== "undefined") {
  /* expose the class to window */
  window.VanillaTilt = VanillaTilt;

  /**
   * Auto load
   */
  VanillaTilt.init(document.querySelectorAll("[data-tilt]"));
}

return VanillaTilt;

}());

</script><script type="text/javascript">
    VanillaTilt.init(document.querySelector(".box"), {
        max: 15,
        speed: 200
    });

</script>
<style type="text/css">
.container
    {
        position: relative;
        display: flex;
        align-items: center;
        flex-direction: column;
        padding: 5px 0;
    }
    .container .box
    {
        position: relative;
        width: auto;
        height: auto;
        box-shadow: 0px 0px 0px black;
        transform-style: preserve-3d;
    }
    .container .box .imgBx
    {
        position: absolute;
    }
    .container .box .img2Bx
    {
        position: relative;
    }
    .container .box:hover .img2Bx
    {
        transform: translateZ(80px) scaleY(1);
    }</style>

 

Mas para que o efeito funcione, você precisará substituir os trechos URL DA SUA IMAGEM AQUI e URL DO LOGO PNG AQUI, pelas URLs de duas imagens com o tamanho de 600 x 300 pixels.

 

Veja em spoiler abaixo, as imagens que utilizei:

 

Spoiler

j0BYvIW.png

Imagem de fundo 600x300

mTZqHrR.png

Logo do jogo no formato PNG com fundo transparente 600x300

 

 Head Image com imagens rotativas Índice 

 

Infelizmente o código que havia sido postado, não estava agindo de forma responsiva nos smartphones... buscaremos outra alternativa.

 

 Separação de passos/etapas do RoadMap Índice 

 

Um esquema com link direto para o Índice que eu uso para separar os passos/etapas dos meus guias, é justamente este que estou usando para separar as dicas deste tópico.

 

Abaixo estão os códigos deste e de mais alguns modelos:

 

 MODELO 1 Índice 

 

<table cellpadding="5" cellspacing="5" id="INSERIR ID AQUI" style="border: 0px solid rgb(0, 0, 0); border-color: #009900; width: 100%; border-collapse:separate; border-radius: 10px 10px 10px 10px; box-shadow: inset 2px 2px 3px black;">
	<tbody>
		<tr>
			<th style="text-align: left;" width="300">
				<span style="color:#009900;">&nbsp;MODELO 1</span>
			</th>
			<th style="text-align: right;" width="50">
				<span style="font-size:12px;"><a href="#Indice" rel="" style="text-decoration:none">&Iacute;ndice</a>&nbsp;</span>
			</th>
		</tr>
	</tbody>
</table>

 

 MODELO 2 Índice 

 

<table cellpadding="5" cellspacing="5" id="INSERIR ID AQUI" style="border: 2px solid rgb(0, 0, 0); border-color: #f39c12; width: 100%; border-collapse:separate; border-radius: 10px 10px 10px 10px; box-shadow: 2px 2px 3px black;">
	<tbody>
		<tr>
			<th style="text-align: left;" width="300">
				<span style="color:#f39c12;">MODELO 2</span>
			</th>
			<th style="text-align: right;" width="50">
				<span style="font-size:12px;"><a href="#Indice" rel="" style="text-decoration:none">&Iacute;ndice</a>&nbsp;</span>
			</th>
		</tr>
	</tbody>
</table>

 

MODELO 3 Índice 

 

<table cellpadding="5" cellspacing="5" id="INSERIR ID AQUI" style="border: 3px outset #cc0000; width: 100%; border-collapse:separate;">
	<tbody>
		<tr>
			<th style="text-align: left;" width="300">
				<span style="color:#cc0000;">MODELO 3</span>
			</th>
			<th style="text-align: right;" width="50">
				<span style="font-size:12px;"><a href="#Indice" rel="" style="text-decoration:none">&Iacute;ndice</a>&nbsp;</span></span>
			</th>
		</tr>
	</tbody>
</table>

 

Lembre-se de alterar o campo INSERIR ID AQUI, para a ID do a href do seu Índice.

 

 Caixas de seleção Índice 

 

As caixas de seleção são úteis para que o usuário marque os troféus, a medida que eles foram sendo desbloqueados. E se manterão marcadas mesmo se o usuário atualizar ou fechar a página, podendo acompanhar seu progresso sempre quando quiser.

 

Confira abaixo um exemplo (Marque as caixas e faça o teste):

 

    Troféus que serão desbloqueados neste passo:

           bronze.png Cole o troféu aqui - Digite a descrição do troféu aqui.
           silver.png Cole o troféu aqui - Digite a descrição do troféu aqui.
           gold.png Cole o troféu aqui - Digite a descrição do troféu aqui.
           Cole o troféu aqui - Digite a descrição do troféu aqui.
    

Se curtiu a ideia e quer implementar esta função no RoadMap do seu guia, cole o código mostrado a seguir, diretamente no Código-Fonte do tópico do seu guia.

 

<p>
    <strong>Troféus que serão desbloqueados neste passo:</strong>
</p>

<div id="checks">
    &nbsp; &nbsp; &nbsp;<input id="CB1" type="checkbox" value="ON">&nbsp; Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB2" type="checkbox" value="ON">&nbsp; Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB3" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB4" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB5" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB6" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB7" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB8" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB9" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB10" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB11" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB12" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB13" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB14" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB15" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB16" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB17" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB18" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB19" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB20" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB21" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB22" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB23" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB24" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    &nbsp; &nbsp; &nbsp;<input id="CB25" type="checkbox" value="ON">&nbsp;&nbsp;Colar aqui<br>
    <script type="text/javascript">
var dcSplit, posnEq, firstGrp, lastGrp, posnCB, regEx, i=0;
 dcSplit=document.cookie.split("; ");
 regEx=(/CB\d+/);           
 for(i=0; i<dcSplit.length; i++)
  { posnEq = dcSplit[i].indexOf("=")+1;      
    posnCB=dcSplit[i].search(regEx);
    if(posnCB != -1)
      { firstGrp = dcSplit[i].substring(posnCB, posnEq-1);
        lastGrp = dcSplit[i].substring( posnEq, dcSplit[i].length);  
        document.getElementById(firstGrp).checked=eval(lastGrp);        
    }  }   

// captura os checkboxs
const checks = document.querySelectorAll('[type="checkbox"]')

// atualiza os checkboxs
function atualizaCheck() {
    for(let i = 0 ; i < checks.length ; i++ ) {
        let check = String(checks[i].id) 
        var value = document.getElementById(`${checks[i].id}`)
        if(localStorage[`${check}`] == 'true') {
            value.setAttribute('checked', 'true')
        } else {
            value.removeAttribute('checked');
        }
    }
}

// adiciona todos os checkboxs no localStorage
let creatLocalStorage = function() {
        for(let i = 0 ; i < checks.length ; i++ ) {
        var value = document.getElementById(`${checks[i].id}`).checked;
        localStorage.setItem(`${checks[i].id}`, value);
    };
}

atualizaCheck()
document.onchange = creatLocalStorage;
</script>

</div>

 

Agora você precisará editá-lo da seguinte forma:

 

Substitua todos os trechos escrito como CB, para algo que só o seu guia possua, tipo as iniciais do jogo que você está guiando.

Cada guia deve ser diferente, pois se dois (ou mais) guias estiverem da mesma forma, quando alguém que estiver seguindo estes guias marcar a caixa de seleção em um deles, o outro guia também será marcado.

 

Por exemplo, no meu guia do The Last of Us Part II, eu alterei todos os trechos CB para TLoUPII

 

O código disponibilizado está configurado para 25 troféus, mas você pode adicionar quantas linhas de códigos quiser, basta dar sequência na numeração (26, 27, etc). Caso contrário, se seu guia tiver menos de 25 troféus, é só apagar as linhas que ficarem sobrando.

 

Com um pouco de conhecimento em CSS, você também pode estilizar as caixas de seleção (assim como eu fiz no guia do The Last of Us Part II), mas isso fica a seu critério.

 

As caixas de seleção também podem ser utilizadas para outros fins no seu guia, como marcar colecionáveis, itens, etc. Tudo vai depender da sua criatividade.

 

 Removendo sublinhado dos links Índice 

 

Note que os links do seu guia possuem um sublinhado, como no exemplo abaixo:

Fórum myPSt

 

Para retirar o sublinhado de todos os links, basta copiar o código abaixo e colar no final do tópico do seu guia, diretamente no Código-Fonte:

 

<style type="text/css">
a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}</style>

 

Com o código adicionado, ficaria assim:

Fórum myPSt

 

Caso queira retirar o sublinhado dos links individualmente, você deverá procurar o link do mesmo dentro do código fonte e colar o seguinte código entre as aspas ( " ) e o sinal de maior que ( > ):

 style="text-decoration:none"

 

Exemplo:

<a href="https://forum.mypst.com.br/">Fórum myPSt</a>

 

Ficaria assim:

<a href="https://forum.mypst.com.br/" style="text-decoration:none">Fórum myPSt</a>

 

 Spoiler para vídeo demonstrativo Índice 

 

Modelo estilizado de spoiler para vídeo com créditos para o autor, com bordas arredondadas e sombreamento interno:

 

VÍDEO DEMONSTRATIVO 

 

COLAR URL DO VÍDEO AQUI

Crédito para: Clique 2x aqui para editar

 

Você deve clicar duas vezes no trecho "Clique 2x aqui para editar", após inserir o código no tópico do seu guia. Uma caixa para inserir a URL e digitar o nome do canal irá abrir.

 

Código utilizado:

<table align="center" cellpadding="5" cellspacing="5" style="width:90%; border:0px solid; border-color:#000000; border-collapse:separate; border-radius: 15px 15px 15px 15px; box-shadow: inset 2px 2px 3px black;">
    <tbody>
        <tr style="border:0px solid; border-color:#000000; border-collapse:collapse;">
            <td>
                <p style="text-align: center;">
                    <strong>V&Iacute;DEO DEMONSTRATIVO</strong>&nbsp;
                </p>
            </td>
        </tr>
        <tr style="border:0px solid;border-color:#CACACA;border-collapse:separate;border-radius: 10px 10px 10px 10px;">
            <td style="border:0px solid;border-color:#CACACA;border-collapse:separate;border-radius: 10px 10px 10px 10px;">
                <div class="ipsSpoiler" data-ipsspoiler="">
                    <div class="ipsSpoiler_header">
                        &nbsp;
                    </div>

                    <div class="ipsSpoiler_contents" data-gramm="false">
                        <p style="text-align: center;">
                            COLAR URL DO V&Iacute;DEO AQUI
                        </p>

                        <p style="text-align: center;">
                            <span style="font-size:12px;">Cr&eacute;dito para: </span><span style="font-size:14px"><span style="display: none;">&nbsp;</span><span style="font-size:12px;"><strong><span style="display: none;">&nbsp;</span><a href="LINK DO CANAL" style="text-decoration:none">Clique 2x aqui para editar</a><span style="display: none;">&nbsp;</span></strong></span><span style="display: none;">&nbsp;</span></span>
                        </p>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

 

Observe na primeira linha, os seguintes trechos de código destacados em spoiler abaixo e faça as alterações que quiser:

 

Spoiler

border:0px é responsável por adicionar contorno.

 

border-color:#000000; é onde você muda a cor dos contornos (Acesse aqui para código de cores).

 

border-radius: 15px 15px 15px 15px; é onde você arredonda as bordas.

Se não quiser bordas arredondadas, altere para 0px ou apague o trecho todo.

 

box-shadow: inset 2px 2px 3px black; é o código de sombreamento.

Se não quiser sombreamento, deixe em 0px ou apague o trecho todo.

O inset faz com que a sombra seja interna. Se apagá-lo, a sombra passará a ser projetada.

O black é a cor da sombra.

 

Para saber exatamente onde colar o código, quando não estiver no Código-Fonte, digite algo que você não usará no seu guia. Pode ser o seu nome ou qualquer outra palavra incomum, que não esteja sendo repetida no guia.

 

Fora do Código-Fonte, você digita:

 

SeuNome

 

Depois entre no Código-Fonte e substitua o trecho (que pelo exemplo vai estar da seguinte forma), pelo código disponibilizado:

 

<p>
    SeuNome
</p>

 

Saia do Código-Fonte, substitua o trecho COLAR URL DO VÍDEO AQUI pela URL do vídeo que irá utilizar e credite o autor.

 

 Imagens PNG para edição Índice 

 

 WTGQT6T.png3PoAf23.png q0zbPwz.png My9s8OH.png 24CudO1.png lDn2Qcx.png

VsDho09.png  A12W5wE.png  1VhSIBE.png  RjTSqRn.png  ZaCMJST.png  5sjQaSQ.png  AHLzTCj.png

SdWJ3lf.png  gUJLDAL.png fhH2pi9.png  SOwLVt2.png  MdCCmAq.png  DGPLJnv.png

 

 Próxima dica em breve Índice 

...

  • Curtir 3

Compartilhe esta postagem


Link to post
Share on other sites
CÓDIGOS COMPARTILHADOS POR OUTROS USUÁRIOS

 

Aqui serão disponibilizados códigos que outros usuários compartilharem. Se você tem algum e deseja compartilhar com a comunidade, entre em contato por MP e eu coloco ele aqui, com os devidos créditos, é claro.

 

 Cubo 3D animado Índice 

 

O usuário @Wesp_can compartilhou o código de um cubo 3D animado bem bacana que ele editou e utilizou no guia do Dragon Quest XI: Echoes of an Elusive Age.

 

full-trophy_0sbjok.pngfull-trophy_0sbjok.pngfull-trophy_0sbjok.pngfull-trophy_0sbjok.pngfull-trophy_0sbjok.pngfull-trophy_0sbjok.png
 

 

Para utilizá-lo em seu guia, é só copiar o código abaixo, diretamente no Código-Fonte do tópico do seu guia:

 

<div class="wrap">
	<div class="cube">
		<img src="IMAGEM 1"> <img src="IMAGEM 2"> <img src="IMAGEM 3"> <img src="IMAGEM 4"> <img src="IMAGEM 5"> <img src="IMAGEM 6"><br>
		&nbsp;
	</div>
</div>
<style type="text/css">
.wrap{
        margin-top: 50px;
        margin-bottom: 50px;
        perspective: 1000px;
        perspective-origin: 50% 50%;
    }
    
    .cube{
        transform-style: preserve-3d;
        width: 150px;
        height: 150px;
        margin: auto;
        position: relative;
    }

    .cube img{
        position: absolute;
        opacity: 0.9;
    }

    .cube img:nth-child(1){
        transform: rotateY(0deg) translateZ(75px);
    }
    
    .cube img:nth-child(2){
        transform: rotateY(90deg) translateZ(75px);
    }
    
    .cube img:nth-child(3){
        transform: rotateY(180deg) translateZ(75px);
    }
    
    .cube img:nth-child(4){
        transform: rotateY(-90deg) translateZ(75px);
    }
    
    .cube img:nth-child(5){
        transform: rotateX(90deg) translateZ(75px);
    }
    
    .cube img:nth-child(6){
        transform: rotateX(-90deg) translateZ(75px);
    }
    
    @keyframes loop{
        from {transform:rotateX(0deg) rotateY(0deg);}
        to {transform:rotateX(360deg) rotateY(360deg);}
    }
        
    .cube{
        animation: loop 10s linear infinite;
    }</style>

 

Agora iremos editar o código para se adequar ao seu guia.

 

Um cubo possui seis lados, por isso devemos trocar os trechos IMAGEM 1 até a IMAGEM 6, com o link da imagem que você quer que apareça no seu cubo. Pode até ser seis imagens diferentes, mas é importante que cada imagem tenha o tamanho de 150pxx150px .

 

 Estilizando a caixa de seleção Índice 

 

Caso você vá utilizar o código de Caixas de seleção no seu guia, saiba que é possível estilizar as caixas, acrescentando códigos CSS para isso.

Como fez o usuário @Wesp_can em um de seus guias, Confira o resultado, clicando aqui.

 

Caso queira fazer o mesmo, basta copiar o código abaixo, e colar depois do código de caixas de seleção e pronto!

 

<style type="text/css">

input[type="checkbox"]{
    position: relative;
    width: 40px;
    height: 13px;
    -webkit-appearance: none;
    background: linear-gradient(0deg, #333, #000);
    outline: none;
    border-radius: 6px;
    box-shadow: 0 0 0 1px #353535; 0 0 0 2px #3e3e3e; inset 0 0 3px rgba(0,0,0,1), 0 2px 7px rgba(0,0,0,.5), inset 0 0 5px rgba(0,0,0,.2);
    }
    
input:checked[type="checkbox"]{
    background: linear-gradient(0deg, #6dd1ff, #20b7ff);
    box-shadow: 0 0 0.7px #6dd1ff, 0 0 0 1.4px #353535; 0 0 0 1.8px #3e3e3e; inset 0 0 3.3px rgba(0,0,0,1), 0 1.8px 7px rgba(0,0,0,.5), inset 0 0 5px rgba(0,0,0,.2);
    }

input[type="checkbox"]:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 27px;
    height: 13px;
    background: linear-gradient(0deg, #000, #6b6b6b);
    border-radius: 7px;
    box-shadow: 0 0 0 1px #232323;
    transform: scale(.98,.96);
    transition: .5s;
    }
    
input:checked[type="checkbox"]:before{
    left: 13px;
}

input[type="checkbox"]:after{
    content: "";
    position: absolute;
    top: calc(50% - 1.5px);
    left: 22px;
    width: 3px;
    height: 3px;
    background: linear-gradient(0deg, #6b6b6b, #000);
    border-radius: 50%;
    transition: .5s;
    }
    
input:checked[type="checkbox"]:after{
    background: #63cdff;
    left: 35px;
    box-shadow: 0 0 1.7px #13b3ff; 0 0 55px #13b3ff;
}
    
</style>

 

 Head Image interativa com texto sobreposto Índice 

 

Mais um código compartilhado pelo @Wesp_can.

Desta vez, de uma Head Image interativa que ao passar o mouse sobre a Head, uma breve descrição será mostrada (no smartphone é só pressionar e arrastar o dedo sobre a imagem).

 

Confira como ficará no exemplo abaixo (Head image utilizada no guia do Dragon Quest XI: Echoes of an Elusive Age):

 

l1DnIMk.jpg
 
 

logo_ign_branca-remov4xj82.png

"Dragon Quest 11: Echoes of an Elusive Age é excelente em muitos níveis. Seja no visual, jogabilidade, personagens, história. O game faz bonito em todas as suas vertentes. Te dá a diversão no nível certo, narra sua história com tranquilidade e apresenta batalhas que simplesmente não te cansam. Enfim, o melhor do gênero neste ano."

Guia de Troféus: ?

 

Para utilizar este efeito em seu guia, substitua o código padrão da sua Head Image, pelo código a seguir:

<center>
	<div class="container">
		<div class="box">
			<div class="img">
				<img class="hack" src="https://i.imgur.com/vSMaAoR.png">
			</div>

			<div class="overlay">
				&nbsp;
			</div>

			<div class="overlay2">
				&nbsp;
			</div>

			<div class="text">
				<h2>
					<img height="70px" src="INSERIR URL DA IMAGEM PNG AQUI" width="100px">
				</h2>

				<p class="p">
					&quot;ESCREVER SEU TEXTO AQUI.&quot;
				</p>
			</div>
		</div>
	</div>
</center>
<style type="text/css">
.container .box {
            border-radius: 5px;
            border: 2px solid #000000;
            position: relative;
            width: 100%;
            max-width: 600px;
            text-align: center;
            overflow: hidden;
        }

        .container .box .hack {
            width: 100%;
            opacity: 0;
            min-height: 175px;
        }

        .container .box .img {
            position: relative;
            width: 100%;
            height: 100%;
            border-radius: 5px;
            background: url(INSERIR URL DA IMAGEM DE FUNDO AQUI);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;

        }

        .container .box .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

        }

        .container .box:hover .overlay {
            background-color: rgba(0, 0, 0, 0.3);
        }

        .container .box .overlay2 {
            position: absolute;
            top: 0;
            left: -150%;
            width: 100%;
            height: 165%;
            background-color: rgba(0, 0, 0, 0.7);
            transition: .5s;
        }

        @media(max-width: 350px) {
            .container .box .overlay2 {
                width: 110%;

            }
        }

        @media(min-width: 350px) {
            .container .box .overlay2 {
                transform: skewX(-30deg);

            }
        }

        .container .box:hover .overlay2 {
            left: -10%
        }

        .container .box .text {
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80%;
            color: black;
            box-sizing: box-border;
            padding: 25px;
            z-index: 1000;
            text-shadow: 5px 5px 10px black;

        }

        .container .box .text h2 {
            position: relative;
            color: white;
            font-size: 1.5rem;
            text-transform: uppercase;
            margin-bottom: 0;
            letter-spacing: 1px;
            opacity: 0;
            transition: .5s;
            transition-timing-function: linear;
            transform: translateY(-10px);
        }

        .container .box:hover .text h2 {
            transform: translateY(0);
            opacity: 1;
            transition-delay: 0.6s;

        }

        .container .box .text p {
            line-height: 1.2;
            opacity: 0;
            color: white;
            font-size: 17px;
            transform: translateY(10px);
            transition: .5s;
            transition-timing-function: linear;
        }

        .container .box:hover .text p {
            transform: translateY(0);
            opacity: 1;
            transition-delay: 0.7s;
        }

        @media(max-width: 604px) {

            .container .box .text .p {
                line-height: 1.2;
                font-size: 10px;
                margin: -10px;
            }

        }
    @media(max-width: 350px) {

            .container .box .text .p {
                line-height: 1.1;
                font-size: 10px;
                margin: 0px -10px 0px ;
            }
        
        }</style>
<p style="text-align: center;">
	<strong>Guia de Trof&eacute;us:&nbsp;</strong>
</p>

Agora iremos alterar os campos necessários para se ajustar ao seu guia:

  • Em INSERIR URL DA IMAGEM PNG AQUI, substitua pela URL de uma imagem png transparente (Cuidado com o tamanho da imagem).
  • Em ESCREVER SEU TEXTO AQUI, digite o texto que vai aparecer ao interagir com a imagem (Cuidado com a quantidade de caracteres).
  • E por último, em INSERIR URL DA IMAGEM DE FUNDO AQUI, insira a URL da imagem que usará como Head Image do seu guia (Lembrando que a imagem deve ter o tamanho em pixels, de exatamente 600 de largura, por 300 de altura).

E pronto. Mais uma dica de Head Image estilosa para seu guia!

 

 Head Image com Card Flip Índice 

 

Outro efeito de Head Image bacanudo compartilhado pelo @Wesp_can.

 

Veja um exemplo da Head image utilizada no guia do Minoria.

Passe o mouse sobre a imagem para visualizar o efeito e no smartphone, pressione o dedo sobre a imagem e arraste:

 

yZlnpHw.jpg
VT2MZ7v.png

"Com um baita potencial e trazendo um desafiador Metroidvania, não estranhem que futuramente ele caminhe lado a lado com os sucessos do gênero. Por enquanto é uma grande ideia, que precisa passar por pequenos ajustes para se tornar um grande nome no meio. E outra, com uma temática adulta e debates necessários, que é incomum de vermos nessa pegada."

 

Para utilizar o mesmo efeito no seu guia, substitua o código padrão da Head Image pelo código abaixo:

 

<center>
	<div class="card">
		<div class="imgBox">
			<img alt="" class="imagemr" data-loaded="true" data-src="URL DA HEAD IMAGE AQUI" src="https://forum.mypst.com.br/applications/core/interface/js/spacer.png" style="height: auto;">
		</div>

		<div class="details">
			<img alt="" class="logosite" data-loaded="true" data-src="URL DO LOGO PNG AQUI" src="https://forum.mypst.com.br/applications/core/interface/js/spacer.png" style="height: auto;">
			<p class="textor">
				&quot;ESCREVA SEU TEXTO AQUI.&quot;
			</p>
		</div>
	</div>
</center>
<style type="text/css">
.card
  {
    width: 100%;
    max-width: 600px;
    background: #fff;
    transform-style: preserve-3d;
    box-shadow: inset 600px 0 50px rgba(0,0,0,.5), 0 20px 100px rgba(0,0,0,.5);
    transition: 1s;
  }
  .card:hover
  {
    transform: perspective(2000px) rotate(-5deg);
    box-shadow: inset 20px 0 50px rgba(0,0,0,.5), 0 10px 100px rgba(0,0,0,.5);
  }
  .card:before
  {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #002d4a;
    transform-origin: bottom;
    transform: skewX(-45deg);
  }
  .card:after
  {
    content: '';
    position: absolute;
    top: 0;
    right: -2px;
    width: 2px;
    height: 100%;
    background: #002d4a;
    transform-origin: left;
    transform: skewY(-45deg);
  }
  
  .imagemr
  {
    width: 100%;
    max-width: 600px;
    height: auto;
  }
  .card .imgBox
  {
    width: 100%;
    height: 100%;
    position: relative;
    transform-origin: left;
    z-index: 1;
    transition: 1s cubic-bezier(.15,1.7,.84,.58);
  }
  .card:hover .imgBox
  {
    transform: rotateY(-95deg);
  }
  .card .details
  {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    padding: 20px;
    z-index: -1;
  }
  .logosite
  {
    width: 200px;
    height: 30px;
  }
  .textor
  {
    color: #002d4a;
    font-size: clamp(.4em, .4em + 1vw, 1.4em);
  }
  @media (max-width: 350px)
  {
    .card .imagemr .imgBox .details .logor .textor
    {
      width: 100%;
    }
  }
  @media (max-height: 175px)
    {
      .logor .textor
      {
        heigth: 100%;
      }
    }</style>

 

Agora faremos as alterações para que o efeito se adeque ao seu guia...

 

Em URL DA HEAD IMAGE AQUI, cole a URL da imagem do seu guia (tamanho de 600x300px).

Em URL DO LOGO PNG AQUI, substitua pelo logotipo que queira usar, ou caso não queira colocar o logo, exclua toda a linha de código mostrada abaixo:

<img alt="" class="logosite" data-loaded="true" data-src="URL DO LOGO PNG AQUI" src="https://forum.mypst.com.br/applications/core/interface/js/spacer.png" style="height: auto;">

E por último, no trecho ESCREVA SEU TEXTO AQUI, digite ou cole o texto que será mostrado ao interagir com a Head Image, mas fique atento a quantidade de caracteres.

 

 Head Image fragmentada para guias com DLC's Índice 

 

Se liga só nesse efeito top de Head Image enviado pelo @Wesp_can:

 

Passe o mouse sobre cada parte para abrir a imagem por completo.

 

Jogo Base

Subterrâneo

Sobrevivência

Última Resistência

 

Para utilizar este efeito no seu guia, copie o código abaixo e faça as alterações, seguindo as intruções dentro do próprio código:

 

<p style="text-align: center; font-size: 12px; padding-top: 1px;">
	<em>Passe o mouse sobre cada parte para abrir a imagem por completo.</em>
</p>

<center>
	<div class="container">
		<div class="clip clip1">
			<div class="content">
				<h2>
					Jogo Base
				</h2>
			</div>
		</div>

		<div class="clip clip2">
			<div class="content">
				<h2>
					DLC 1
				</h2>
			</div>
		</div>

		<div class="clip clip3">
			<div class="content">
				<h2>
					DLC 2
				</h2>
			</div>
		</div>

		<div class="clip clip4">
			<div class="content">
				<h2>
					DLC 3
				</h2>
			</div>
		</div>
	</div>
</center>

<style type="text/css">
@media (max-width:280px) { 
          .content-guia {padding-top:140px;}
      }
      @media (min-width:281px) and (max-width:320px) { 
          .content-guia {padding-top:150px;}
      }
      
      @media (min-width: 321px) and (max-width:384px) { 
          .content-guia {padding-top:180px;}
      }

      @media (min-width:385px) and (max-width:414px) { 
          .content-guia {padding-top:190px;}
      }
      
      @media (min-width:415px) and (max-width:480px) { 
          .content-guia {padding-top:220px;}
      }
      @media (min-width:481px) and (max-width:510px) { 
          .content-guia {padding-top:240px;}
      }
      @media (min-width:511px) and (max-width:540px) { 
          .content-guia {padding-top:260px;}
      }
      @media (min-width:541px) and (max-width:600px) { 
          .content-guia {padding-top:280px;}
      }
      @media (min-width:601px) { 
          .content-guia {padding-top:300px;}
      }
	  
      /*
      @media (max-width:540px) { 
          .content-guia {padding-top:320px;}
      }
      */
	  
        .testeindex
        {
          z-index: 2;
        }
        .container
        {
          display: flex;
          position: relative;
          width: 100%;
          max-width: 600px;
          z-index: 1;
        }
        .container .clip
        {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          transition: 0.5s;
        }
  
  /*
  A quantidade de DLC's vai mudar um pouco código, vou deixar abaixo o modelo caso o jogo tenha 1, 2 e 4 DLC's, caso seu jogo tenha mais do que 4 DLC's, pode me mandar msg que te ajudo a criar o código pra ele.
  A única coisa que precisa mudar é o codigo clip-path e seus valores e, logicamente, a quantidade de clip.clip de acordo com a quantidade de DLC's. Ex: no meu caso são 3 dlc's mais o jogo base, então tenho que ter clip-clip1 até o clip-clip4. Agora vamos ao clip-path.
  
  Jogo com 1 DLC:
  .container .clip.clip1
        {
          padding-top: 50%;
          background: url(https://i.imgur.com/vSMaAoR.png);
          background-size: cover;
          clip-path: polygon(0 0, 100% 0, 0 100%, 0% 100%);
        }
        .container .clip.clip2
        {
          padding-top: 50%;
          background: url(https://i.imgur.com/vSMaAoR.png);
          background-size: cover;
          clip-path: polygon(100% 0, 100% 0, 100% 100%, 0 100%);
        }
  
  Jogo com 2 DLC:
   .container .clip.clip1
        {
          padding-top: 50%;
          background: url(https://i.imgur.com/vSMaAoR.png);
          background-size: cover;
          clip-path: polygon(0 0, 0 0, 60% 0, 0 100%);
        }
        .container .clip.clip2
        {
          padding-top: 50%;
          background: url(https://i.imgur.com/vSMaAoR.png);
          background-size: cover;
          clip-path: polygon(60% 0, 100% 0, 100% 40%, 0 100%);
        }
        .container .clip.clip3
        {
          padding-top: 50%;
          background: url(https://i.imgur.com/vSMaAoR.png);
          background-size: cover;
          clip-path: polygon(100% 40%, 100% 40%, 100% 100%, 0 100%);
        }
  
  Jogo com 4 DLC:
   .container .clip.clip1
        {
          padding-top: 50%;
          background: url(https://i.imgur.com/vSMaAoR.png);
          background-size: cover;
          clip-path: polygon(0 0, 0 0, 40% 0, 0 100%);
        }
        .container .clip.clip2
        {
          padding-top: 50%;
          background: url(https://i.imgur.com/vSMaAoR.png);
          background-size: cover;
          clip-path: polygon(40% 0, 80% 0, 80% 0, 0 100%);
        }
        .container .clip.clip3
        {
          padding-top: 50%;
          background: url(https://i.imgur.com/vSMaAoR.png);
          background-size: cover;
          clip-path: polygon(80% 0, 100% 0, 100% 20%, 0 100%);
        }
        .container .clip.clip2
        {
          padding-top: 50%;
          background: url(https://i.imgur.com/vSMaAoR.png);
          background-size: cover;
          clip-path: polygon(100% 20%, 100% 35%, 100% 65%, 0 100%);
        }
        .container .clip.clip3
        {
          padding-top: 50%;
          background: url(https://i.imgur.com/vSMaAoR.png);
          background-size: cover;
          clip-path: polygon(100% 65%, 100% 100%, 100% 100%, 0 100%);
        }
  
      O atributo font-size também precisa de um pouco de atenção, visto que as palavras terão tamanhos diferentes dependendo do nome das dlc's, então você pode ir mexendo nos valores dentro da TAG clamp pra deixar a seu gosto. Os valores dentro dessa TAG funcionam de forma responsiva e cada um deles define um tamanho, o primeiro valor, no meu caso é .2m, seria o mínimo tamanho que ele deve ficar, os valores .2em + 1vw é o tamanho ideal e o valor 1em é o tamanho máximo que eu quero. Vá mexendo que rápido se aprende a usar o Clamp.
  */
  
  .container .clip.clip1
        {
          padding-top: 50%;
          background: url(https://i.imgur.com/vSMaAoR.png);
          background-size: cover;
          clip-path: polygon(0 0, 50% 0, 0 100%, 0% 100%);
        }
        .container .clip.clip2
        {
          padding-top: 50%;
          background: url(https://i.imgur.com/vSMaAoR.png);
          background-size: cover;
          clip-path: polygon(50% 0, 100% 0, 0 100%, 0% 100%);
        }
        .container .clip.clip3
        {
          padding-top: 50%;
          background: url(https://i.imgur.com/vSMaAoR.png);
          background-size: cover;
          clip-path: polygon(100% 0, 100% 50%, 0 100%, 0% 100%);
        }
        .container .clip.clip4
        {
          padding-top: 50%;
          background: url(https://i.imgur.com/vSMaAoR.png);
          background-size: cover;
          clip-path: polygon(100% 50%, 100% 100%, 0 100%, 0% 100%);
        }
        
        .container:hover .clip
        {
          clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        }
        .container .clip:hover
        {
          clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        }
        .container .clip .content
        {
          position: absolute;
          bottom: -100%;
          left: 0;
          width: 50%;
          padding: 2px;
          background: black;
          opacity: 0;
          color: #f76d22;
          font-size: clamp(.2em, .2em + 1vw, 1em);
          transition: 0.5s;
        }
        .container .clip:hover .content
        {
          bottom: 0;
          opacity: 1;
        }</style>
		
<div class="content-guia">
	<p style="text-align:center;">
		<strong>Guia de trof&eacute;us:&nbsp;<a class="testeindex" href="URL DO JOGO NO PORTAL MYPST" rel="external nofollow noopener" style="text-decoration:none" target="_blank"><span style="color: #f76d22;">Nome do Jogo</span></a></strong>
	</p>

	<p>
		Todo o conte&uacute;do do seu guia aqui.
	</p>
</div>

 

Lembre-se de substituir as urls atuais, pelas urls das imagens que você usaria em seu guia (Jogo Base e DLC's).

 

Caso tenha alguma dúvida em relação ao código, entre em contato com o @Wesp_can via MP, para que ele possa auxiliá-lo.

 

 Próxima dica em breve Índice 

Escrever aqui...

  • Curtir 3

Compartilhe esta postagem


Link to post
Share on other sites
16 horas atrás, Treviz_BR3 disse:

Tem uma forma mais simples ? 

 

De montar o Guia?

 

Estou querendo uma orientação

 

Entra em contato por MP, que eu te dou um auxílio, blz?!

  • Curtir 1

Compartilhe esta postagem


Link to post
Share on other sites

Participe da conversa

Você pode postar agora e se cadastrar mais tarde. Se você tem uma conta, faça o login para postar com sua conta.
Note: Your post will require moderator approval before it will be visible.

Visitante
Responder a este tópico

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emojis são permitidos.

×   Seu link foi automaticamente incorporado.   Mostrar como link

×   Seu conteúdo anterior foi restaurado.   Limpar o editor

×   Não é possível colar imagens diretamente. Carregar ou inserir imagens do URL.


×
×
  • Criar Novo...